Q&A
関数内に変数宣言することで無事に解決いたしました。
丁寧な回答ありがとうございました。
###前提・実現したいこと
HTMLで、ランチャーメニュー的なものを作ろうとしています。
htmlとJavaScriptを使用しました。
MSEdgeで開くと画面が真っ白に、Chromeで開くと、「ファイルが見つかりませんでした。」と表示されてしまいます。
###該当のソースコード
HTML(index.html)
html
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title></title> 6<link rel="stylesheet" href="FirstPosition.css"> 7<link rel="stylesheet" href="NextPosition.css"> 8</head> 9<body> 10<div id="main"> 11<img src="img/menu/single.png" width="100px"> 12<img src="img/menu/double.png" width="100px"> 13<img src="img/menu/message.png" width="100px"> 14<img src="img/menu/location.png" width="100px"> 15<img src="img/menu/config.png" width="100px"> 16</div> 17<script src="main.js"></script> 18</body> 19</html> 20
JavaScript(main.js)
javascript
1 2var flag = false; 3var single = document.getElementById("single"); 4var double = document.getElementById("double"); 5var message = document.getElementById("message"); 6var location = document.getElementById("location"); 7var config = document.getElementById("config"); 8function a(){ 9 flag = !flag 10 if(flag){ 11 single.className = "on"; 12 double.className = "on"; 13 message.className = "on"; 14 location.className = "on"; 15 config.className = "on"; 16 }else{ 17 single.className = "off"; 18 double.className = "off"; 19 message.className = "off"; 20 location.className = "off"; 21 config.className = "off"; 22 } 23} 24
###試したこと
main.js内を[alert("");]のみにしたところ、正常に作動しました。
また、main.jsを読み込まないようにしたところ、正常に作動しました。
(これらのことから、JavaScriptが問題？)
回答2件
0
何点か気づいたことがあります。
- HTML内に
idを振ったエレメントがないので、document.getElementByIdの結果はすべてnullとなります。 locationはブラウザの機能として用意されている名前ですので、変数名に使ってしまうとおかしな動作になります。function a()は定義しただけなので、全く使われません。
投稿2017/08/10 00:16
総合スコア145183
0
ベストアンサー
javascript内で様々なエラーが出ています。
JSHint等のツールで構文チェックをしてみてはどうでしょうか？
※状態の改善と意図した動作をするかは別なのでまずはエラー解消してから調整してください
コーディングにテキストエディタをお使いであればBrackets等の同時に構文チェックをしてくれるテキストエディタの使用をすすめます。
追記：
今回のnullページへの遷移の原因は「location」という変数を使用していることです。
location自体は画面遷移のときなどに利用されるオブジェクトで
いわばjavascript上における予約語のようなもので、一般の変数には使用不可なものです。
別の変数名の使用をすすめます。
投稿2017/08/10 00:03
編集2017/08/10 00:16
総合スコア80850
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。