質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

3061閲覧

フォームのonclickで画面遷移した時に、同じページなのにcssが効かなくなる

oyatsu8

総合スコア97

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/05/19 15:38

フォームのonclickで画面遷移した時に、同じページなのにcssが無くなってしまうのですが、どうしたらいいか分からず質問させて頂きました。コンソールからみると、head内にあるはずの要素が全て消えてしまっています。REBOOTのボタンが出たときにもcssを適用さえるにはどうしたらいいのでしょうか?

html,javascript,css

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8" /> 5 <TITLE>test</TITLE> 6 7 <link rel="stylesheet" href="./css/style.css"> 8 9<style type=”text/css”> 10 11 12#main01{ 13 width: 100%; 14 border: solid 1px #F00; 15 text-align: center; 16} 17 18input#start{ 19 margin: 0 auto; 20 padding: 20px; 21 22 font-size: 40px; 23 /* background: #EEE;*/ 24 background: #FFF; 25 26 color: #00F; 27 width: 200px; 28 height: 100px; 29 30 31border: 8px solid #00F; 32} 33 34input#re01{ 35 font-size: 40px; 36 position:absolute; 37 left:200px; 38 top:200px; 39 /* background: #EEE;*/ 40 background: #FFF; 41 border-top: 3px solid #DDD; 42 border-left: 3px solid #DDD; 43 border-right: 3px solid #BBB; 44 border-bottom: 3px solid #BBB; 45 border-color:#F00; 46 color:#F00; 47 width: 200px; 48 height: 100px; 49 padding: 10px 0 50} 51 52.test{margin: 0 0 0 100; border:solid 2px #00F;} 53 54.cipher01{ 55 margin: 20px 10px; 56 boder:solid 1px #f00; 57 58} 59 60 61.reboot01{ 62 margin: 20px 10px; 63 boder:solid 1px #00f; 64 65 background: #00ff00; 66} 67</style> 68 69</head> 70 71<BODY> 72<main id="main01"> 73<input id="start" type="button" value="START" onClick="start()"> 74 75</main> 76 77<script> 78 function start(){ 79 80 angou = []; 81 count = 0; 82 hira = prompt("文字を入力して下さい"); 83 84 sp1(); 85 loop1(); 86 87 angou.reverse(); 88 document.write('<div class="cipher01">' + hira + '</div>' + '<div class="cipher01">' + angou.join("") + '</div>'); 89 document.write('<div class="reboot01">' + "<input id='re' type='button' value='REBOOT' onclick='location.reload();'> " + '</div>'); 90 91 } 92 93var d = 0; 94var x = 0; 95 96function sp1(){ 97 x = hira.length; 98 bunnkai = hira.split(""); 99 console.log(x); 100} 101 102 103function loop1(){ 104 while(count <= x){ 105 moji = bunnkai[count]; 106 change1(); 107 count = count + 1; 108 } 109} 110 111function change1(){ 112} 113 114 115</script> 116 </BODY> 117</HTML>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

document.writeで書き換えているからですね。
色々他にされているようなので、下記のコードをそのままでは上手くいかないかもしれません。
分かり易さを優先して冗長ですが参考までに。

function start(){ angou = []; count = 0; hira = prompt("文字を入力して下さい"); sp1(); loop1(); angou.reverse(); var main01 = document.getElementById('main01'); var divElement = document.createElement('div'); divElement.classList.add('cipher01'); divElement.textContent = hira; main01.appendChild(divElement); divElement = document.createElement('div'); divElement.classList.add('cipher01'); divElement.textContent = angou.join(""); main01.appendChild(divElement); divElement = document.createElement('div'); divElement.classList.add('reboot01'); divElement.innerHTML = "<input id='re' type='button' value='REBOOT' onclick='location.reload()'> "; main01.appendChild(divElement); }

投稿2017/05/19 20:35

kyunta

総合スコア350

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

oyatsu8

2017/05/20 04:55

解決しました!調べた所とても古いやり方だったようで下記のように修正しました。 フォームボタン部分 <form> <button type="button" id="start_bt">START</button> </form> JS var btn01 = document.getElementById('start_bt'); var btn01_obj = btn01.parentNode; btn01.addEventListener('click',start,false);
oyatsu8

2017/05/20 04:56

ありがとうございました
oyatsu8

2017/05/20 15:54

すみません、答えて頂いていた回答に答えていませんでした。 書いて頂いたコードでうまくいきました。 とても助かりました。 基本的な使い方はなんとか勉強したいと思いました
kyunta

2017/05/20 20:38

ご丁寧にありがとうございます。 ユーザーの入力値をHTML系に入れる場合はちょっと気を付けた方が良いと思います。 私もwebで100%のセキュリティ対策を出来るレベルにありませんけど^^;
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問