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

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

ただいまの
回答率

87.95%

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,914

score 394

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Script-Type">
  <title>Document</title>
  <script>
  <!--
    function check() {
      for ( i=0; i<document.form1.length; i++) {
        if (document.form1.elements[i].value=="") {
          alert("全部入力してください");
          return false;
        }
      }
      return true;
    }
    document.fgColor="black";
    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];
    b=new Array(1,2,3);
    document.write(b[0]+b[2],"<br>");
    document.write("ドメインは",document.domain,"<br>");
    document.write("タイトルは",document.title,"<br>");
    document.write("最終更新は",document.lastModified,"<br>");
    x = 5;
    a="aa11";
    num=parseInt(a);
    document.write(num);
    document.write((b=6)+1);
    point=90;
    result=(point>75)?"合格 ":"不合格 ";
    document.write(result);
    document.write(100/0);
    dd=new Date();
    seconds=dd.getSeconds();
    if (seconds%3==0) {
      document.write("3で割り切れます。");
    } else if (seconds%2==0) {
      document.write("偶数秒です。");
    } else {
      document.write("どちらでもないです。");
    }
    w=1;
    while(w<5){
      document.write("<br>",w);
      w++;
    }
    for ( i = 1; i <= 5; i++) {
      document.write("<br>こんにちは");
    }
    for ( j = 1; j <= 9; j++) {
      document.write("<br>",j,"の位<br>");
      for ( i = 1; i <= 9; i++) {
        document.write(j,"*",i,"=",j*i,"<br>");
      }
    }
    //-->
  </script>
  </head>
  <body>
<form action="" method="get" name="form1" onsubmit="return check()">
  <input type="text" name="name"><br>
  <input type="text" name="name"><br>
  <input type="submit" name="送信"><br>
  <input type="reset" name="リセット">
</form>
<noscript>none javascript...</noscript>
</body>
</html>

追記

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Script-Type">
  <title>Document</title>
</head>
<body onload="defaultStatus='color'">
<input type="button" value="ボタン" onclick="document.bgColor='blue';" ondblclick="document.bgColor='#ccc';"><br>
<form action="" method="get" accept-charset="utf-8" name="form1" onsubmit="return check()">
  <input type="text" name="name"><br>
  <input type="submit" name="送信"><br>
</form>
<script>
  <!--
  function check() {
    for ( i = 0; i < document.form1.length; i++) {
      if (document.form1.elements[i].value == "") {
        alert("全部入力してください");
        return false;
      }
    }
    return true;
  }
  document.forms[0].length;
  document.fgColor="black";
  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];
//  setInterval("document.bgColor=col[n];",1000);
//  confirm("ダウンロードしますか?");
//  prompt("お名前は?","しおり");
//  window.open("https://www.google.co.jp/","new","toolbar=1");
/*
  fuku=window.prompt("福引");
  switch(fuku){
    case "7":
      document.write("おめでとう");
      break;
    case "5":case "2":
      document.write("おしい");
      break;
    default:
      document.write("はずれ");
      break;
  }
*/
  b=new Array(1,2,3);
  document.write(b[0]+b[2],"<br>");
  document.write("ドメインは",document.domain,"<br>");
  document.write("タイトルは",document.title,"<br>");
  document.write("最終更新は",document.lastModified,"<br>");
  x = 5;
  a="aa11";
  num=parseInt(a);
  document.write(num);
  document.write((b=6)+1);
  point=90;
  result=(point>75)?"合格 ":"不合格 ";
  document.write(result);
  document.write(100/0);
  dd=new Date();
  seconds=dd.getSeconds();
  if (seconds%3==0) {
    document.write("3で割り切れます。");
  } else if (seconds%2==0) {
    document.write("偶数秒です。");
  } else {
    document.write("どちらでもないです。");
  }
  w=1;
  while(w<5){
    document.write("<br>",w);
    w++;
  }
  for ( i = 1; i <= 5; i++) {
    document.write("<br>こんにちは");
  }
  for ( j = 1; j <= 9; j++) {
    document.write("<br>",j,"の位<br>");
    for ( i = 1; i <= 9; i++) {
      document.write(j,"*",i,"=",j*i,"<br>");
    }
  }
  //-->
</script>
<br>
<form action="" method="get" accept-charset="utf-8" name="form1" onsubmit="return check()">
  <input type="text" name="name"><br>
  <input type="submit" name="送信"><br>
</form>
<noscript>none javascript...</noscript>
</body>
</html>

さらに追記

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • KanaSakaguchi

    2016/06/05 12:38

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

    キャンセル

  • makoto-n

    2016/06/05 12:46

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

    キャンセル

回答 4

+2

うまく行く方では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 15:06

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

    キャンセル

  • 2016/06/05 21:56

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

    キャンセル

+1

どのようなサイト/書籍を参考にされているかはわかりませんが、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 21:42

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

    キャンセル

checkベストアンサー

0

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/05 14:08

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

    キャンセル

0

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/05 13: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な方でもコメントアウトしています。

    キャンセル

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

  • ただいまの回答率 87.95%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る