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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

4回答

5889閲覧

JavaScriptの練習です。突然背景色の変更が効かなくなりました、、ちょっと困惑しています。

makoto-n

総合スコア436

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/06/05 03:32

編集2016/06/05 04:11

JavaScriptの練習なのですが、いろいろ触っていると背景色を変更できなくなってしまって困惑しています。
エラーを自分で見つけれたらいいのですが、、
コンソールを開いても何も記載されていませんでした。
セミコロン忘れとかでしょうか?

本来であれば1秒たって更新をすれば背景色が変更される予定です。
練習ですので内容は適当です。
ご指摘お願いますm(..)m

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="Content-Script-Type"> 6 <title>Document</title> 7 <script> 8 <!-- 9 function check() { 10 for ( i=0; i<document.form1.length; i++) { 11 if (document.form1.elements[i].value=="") { 12 alert("全部入力してください"); 13 return false; 14 } 15 } 16 return true; 17 } 18 document.fgColor="black"; 19 col=new Array(); 20 col[0]="red"; 21 col[1]="blue"; 22 col[2]="yellow"; 23 col[3]="green"; 24 col[4]="gray"; 25 n=Math.floor(Math.random()*col.length); 26 document.bgColor=col[n]; 27 b=new Array(1,2,3); 28 document.write(b[0]+b[2],"<br>"); 29 document.write("ドメインは",document.domain,"<br>"); 30 document.write("タイトルは",document.title,"<br>"); 31 document.write("最終更新は",document.lastModified,"<br>"); 32 x = 5; 33 a="aa11"; 34 num=parseInt(a); 35 document.write(num); 36 document.write((b=6)+1); 37 point=90; 38 result=(point>75)?"合格 ":"不合格 "; 39 document.write(result); 40 document.write(100/0); 41 dd=new Date(); 42 seconds=dd.getSeconds(); 43 if (seconds%3==0) { 44 document.write("3で割り切れます。"); 45 } else if (seconds%2==0) { 46 document.write("偶数秒です。"); 47 } else { 48 document.write("どちらでもないです。"); 49 } 50 w=1; 51 while(w<5){ 52 document.write("<br>",w); 53 w++; 54 } 55 for ( i = 1; i <= 5; i++) { 56 document.write("<br>こんにちは"); 57 } 58 for ( j = 1; j <= 9; j++) { 59 document.write("<br>",j,"の位<br>"); 60 for ( i = 1; i <= 9; i++) { 61 document.write(j,"*",i,"=",j*i,"<br>"); 62 } 63 } 64 //--> 65 </script> 66 </head> 67 <body> 68<form action="" method="get" name="form1" onsubmit="return check()"> 69 <input type="text" name="name"><br> 70 <input type="text" name="name"><br> 71 <input type="submit" name="送信"><br> 72 <input type="reset" name="リセット"> 73</form> 74<noscript>none javascript...</noscript> 75</body> 76</html>

追記

このソースでの挙動を確認したいのが、
・背景色の変更
・更新ごとに背景色の変更されていくこと
です。

いろいろさわる前は上記2つは確認できたのですが、
さわることで確認できなくなってしまい、、
ちなみにこれの少し前の確認できるものがこれです。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="Content-Script-Type"> 6 <title>Document</title> 7</head> 8<body onload="defaultStatus='color'"> 9<input type="button" value="ボタン" onclick="document.bgColor='blue';" ondblclick="document.bgColor='#ccc';"><br> 10<form action="" method="get" accept-charset="utf-8" name="form1" onsubmit="return check()"> 11 <input type="text" name="name"><br> 12 <input type="submit" name="送信"><br> 13</form> 14<script> 15 <!-- 16 function check() { 17 for ( i = 0; i < document.form1.length; i++) { 18 if (document.form1.elements[i].value == "") { 19 alert("全部入力してください"); 20 return false; 21 } 22 } 23 return true; 24 } 25 document.forms[0].length; 26 document.fgColor="black"; 27 col=new Array(); 28 col[0]="red"; 29 col[1]="blue"; 30 col[2]="yellow"; 31 col[3]="green"; 32 col[4]="gray"; 33 n=Math.floor(Math.random()*col.length); 34 document.bgColor=col[n]; 35// setInterval("document.bgColor=col[n];",1000); 36// confirm("ダウンロードしますか?"); 37// prompt("お名前は?","しおり"); 38// window.open("https://www.google.co.jp/","new","toolbar=1"); 39/* 40 fuku=window.prompt("福引"); 41 switch(fuku){ 42 case "7": 43 document.write("おめでとう"); 44 break; 45 case "5":case "2": 46 document.write("おしい"); 47 break; 48 default: 49 document.write("はずれ"); 50 break; 51 } 52*/ 53 b=new Array(1,2,3); 54 document.write(b[0]+b[2],"<br>"); 55 document.write("ドメインは",document.domain,"<br>"); 56 document.write("タイトルは",document.title,"<br>"); 57 document.write("最終更新は",document.lastModified,"<br>"); 58 x = 5; 59 a="aa11"; 60 num=parseInt(a); 61 document.write(num); 62 document.write((b=6)+1); 63 point=90; 64 result=(point>75)?"合格 ":"不合格 "; 65 document.write(result); 66 document.write(100/0); 67 dd=new Date(); 68 seconds=dd.getSeconds(); 69 if (seconds%3==0) { 70 document.write("3で割り切れます。"); 71 } else if (seconds%2==0) { 72 document.write("偶数秒です。"); 73 } else { 74 document.write("どちらでもないです。"); 75 } 76 w=1; 77 while(w<5){ 78 document.write("<br>",w); 79 w++; 80 } 81 for ( i = 1; i <= 5; i++) { 82 document.write("<br>こんにちは"); 83 } 84 for ( j = 1; j <= 9; j++) { 85 document.write("<br>",j,"の位<br>"); 86 for ( i = 1; i <= 9; i++) { 87 document.write(j,"*",i,"=",j*i,"<br>"); 88 } 89 } 90 //--> 91</script> 92<br> 93<form action="" method="get" accept-charset="utf-8" name="form1" onsubmit="return check()"> 94 <input type="text" name="name"><br> 95 <input type="submit" name="送信"><br> 96</form> 97<noscript>none javascript...</noscript> 98</body> 99</html>

さらに追記

すみません、言い方に間違いがあったみたいでした。
n=Math.floor(Math.random()*col.length);
で変更処理をしようとしています、ができません。

<body>内から<head>内に移動させたのも間違いでしょうか?

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

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

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

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

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

KanaSakaguchi

2016/06/05 03:38

この場合ハイライトはhtmlが良いと思います。 また、確認してみようにも何をどうすれば良いのかがわからなかったので、"こういう動作をするとここがこうなるはず"というのを書いてください。
makoto-n

2016/06/05 03:46

htmlのハイライトはタグのみとおもっていました。 教えてくれてありがとうございます。背景色の変更が効かなくなりました。
guest

回答4

0

うまく行く方ではbodyの中にscriptが書かれています。
うまくいかない方ではscriptheadの中です。
headが読み込まれた頃はまだbodyがないので背景色の設定が効かないのだと思いました。

そこで、関数外の部分をwindow.onload=function(){}で囲ってページがロードされた時に実行されるようにしてみました。
それでも背景色が変わらないように見えましたが、背景色指定の後にalert(document.bgColor);を仕込んだところ、更新するたびに色が変わる→アラートが出る→白背景に黒字文字列が出るという挙動になりました。
背景色を変える前に1つdocument.write();を仕込んだところ更新するたびにきちんと変わるようになりました。
この挙動は私にはよくわかりませんでした。


余談
document.bgColorは非推奨のようです。
Document.bgColor - Web APIs | MDN

Deprecated

This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

Google翻訳結果

非推奨の

この機能は、Web標準から削除されました。一部のブラウザではまだそれをサポートしているかもしれないが、それは廃棄される過程にあります。古いまたは新しいプロジェクトでは使用しないでください。それを使用しているページやWebアプリケーションは、任意の時点で破損する可能性があります。

今はdocument.body.style.backgroundColorで設定します。
例えばこんな感じです。
JavaScript で要素のスクロール値を取得して背景色に反映させてみよう | phiary

投稿2016/06/05 06:04

KanaSakaguchi

総合スコア52

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

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

KanaSakaguchi

2016/06/05 06:06

すみません、もう解決済みでしたね。
makoto-n

2016/06/05 12:56

いいえ!ありがとうございます! 大変参考になります!
guest

0

どのようなサイト/書籍を参考にされているかはわかりませんが、document.write は将来的に推奨されなくなる可能性があり、また document.bgColor は既に非推奨になっていますので、別の新しい書籍などを探されることをお勧めします。

【HTML5でdocument.writeは使ってはいけない? | 3streamer blog】
http://blog.3streamer.net/html5-css3/document-write-html5-181/

【document.bgColor - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/bgColor

投稿2016/06/05 05:21

kei344

総合スコア69364

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

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

makoto-n

2016/06/05 12:42

わかりました。 ありがとうございます。
guest

0

ベストアンサー

bgColorの変更を一番最後に持っていくと大丈夫でした。
調べてみましたが理由は不明です。おそらくdocumentの更新とbgColorの更新の順序が問題なのだと思います。

とりあえず、問題が起きた時は問題の箇所を絞り込むため、プログラムの末尾のほうから少しずつコメントアウトしていき、動かなくなる行を探し出すことが修正の近道です。

また、PCのブラウザでやっているのであれば、ディベロッパーツールと呼ばれるモードでJavascriptを一行ずつ進めて状況を確認するという方法もあります。
詳しくは自分で調べてみてください。

投稿2016/06/05 05:05

編集2016/06/05 05:09
masaya_ohashi

総合スコア9206

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

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

makoto-n

2016/06/05 05:08

masaya_ohashiさんの方法で解決しました。 ありがとうございます。
guest

0

Javascript

1setInterval("document.bgColor=col[n];",1000);

これが消え去っています。
これが1秒ごとに背景を変えていた処理です。
setIntervalは一つ目の引数の処理を二つ目の引数のミリ秒ごとに延々繰り返す処理です。

投稿2016/06/05 04:04

masaya_ohashi

総合スコア9206

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

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

makoto-n

2016/06/05 04:07

ありがとうございます。 けど、すみませんそれちがいます。 col=new Array(); col[0]="red"; col[1]="blue"; col[2]="yellow"; col[3]="green"; col[4]="gray"; n=Math.floor(Math.random()*col.length); document.bgColor=col[n]; で変更しようとしています。 それは自動で変更できるかどうかの実験で書いていました。 OKな方でもコメントアウトしています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問