If-Statementが実行されず、前のコードが否定される

Question

私はこのサイトを初めて使用したことがありません。私の割り当てでは、1から12の間の数字を入力してもらえないか再度質問し、入力した数字に基づいて背景色を変更するようにユーザーに促す必要があります。 6つの赤の変化の下では、6は白であり、6より上のものは青である。

何らかの理由で、if/if-else/elseブロックをコメントアウトすると、その前にプロンプ​​トが表示されます。コメントを外すと、Webページ上で何も起こりません。理由はわかりません。誰かが私が間違っていることを教えてもらえますか？

<script> 

     var userNum = window.prompt("Please insert a number between 1 and 12...", "1 - 12"); 

     if((userNum <= 12) && (userNum >= 1)) 
     { 
      document.write 
      (
       userNum + " * 1 = " + userNum * 1; 
       userNum + " * 2 = " + userNum * 2; 
       userNum + " * 3 = " + userNum * 3; 
       userNum + " * 4 = " + userNum * 4; 
       userNum + " * 5 = " + userNum * 5; 
       userNum + " * 6 = " + userNum * 6; 
       userNum + " * 7 = " + userNum * 7; 
       userNum + " * 8 = " + userNum * 8; 
       userNum + " * 9 = " + userNum * 9; 
       userNum + " * 10 = " + userNum * 10; 
       userNum + " * 11 = " + userNum * 11; 
       userNum + " * 12 = " + userNum * 12; 
      ) 

      if(userNum < 6) 
      { 
       window.bgColor = "red"; 
      } 
      else if(userNum > 6) 
      { 
       window.bgColor = "blue"; 
      } 
      else 
      { 
       window.bgColor = "white"; 
      } 
     } 
     else if((userNum > 12) || (userNum < 1)) 
     { 
      window.alert("Error: Input value outside requested range"); 
      window.reload(); 
     } 
     else 
     { 
      window.alert("Error: Input value not a number"); 
      window.reload(); 
     } 

</script> 

Answer 1

私はそれのコメントを外した場合は、何もすべてのWebページに起こりませんし、私は理由を知りません。

ブラウザに組み込まれているデバッグツールを使用してください。たとえば、Chromeを使用している場合は、devツールhereをご覧ください。ブラウザ名を入力する "XYZ dev tools"を検索すると、ブラウザの開発ツールに関する情報が得られます。

重要なのは、コンソールです。このコンソールは、ほとんどのOSではCtrl + Shift + IまたはF12で、Mac OSではCmd + Shift + Iでアクセスできます。コンソールでは、最初の;にdocument.writeコールの構文エラーがあります。そのような表現の真中に;を入れることはできません。

var userNum = window.prompt("Please insert a number between 1 and 12...", "1 - 12"); 

if((userNum <= 12) && (userNum >= 1)) 
{ 
    document.write 
    (
     userNum + " * 1 = " + userNum * 1 + "<br>" + 
     userNum + " * 2 = " + userNum * 2 + "<br>" + 
     userNum + " * 3 = " + userNum * 3 + "<br>" + 
     userNum + " * 4 = " + userNum * 4 + "<br>" + 
     userNum + " * 5 = " + userNum * 5 + "<br>" + 
     userNum + " * 6 = " + userNum * 6 + "<br>" + 
     userNum + " * 7 = " + userNum * 7 + "<br>" + 
     userNum + " * 8 = " + userNum * 8 + "<br>" + 
     userNum + " * 9 = " + userNum * 9 + "<br>" + 
     userNum + " * 10 = " + userNum * 10 + "<br>" + 
     userNum + " * 11 = " + userNum * 11 + "<br>" + 
     userNum + " * 12 = " + userNum * 12 + "<br>" 
    ); 

    if(userNum < 6) 
    { 
     window.bgColor = "red"; 
    } 
    else if(userNum > 6) 
    { 
     window.bgColor = "blue"; 
    } 
    else 
    { 
     window.bgColor = "white"; 
    } 
} 
else if((userNum > 12) || (userNum < 1)) 
{ 
    window.alert("Error: Input value outside requested range"); 
    window.reload(); 
} 
else 
{ 
    window.alert("Error: Input value not a number"); 
    window.reload(); 
} 

しかしいくつかの他の注意事項：一般的に

• は、document.writeを避けるあなたは、おそらくも最小はバージョンがあるかもしれない変わるので、あなたが出力している行を分けたいです。ページ上の情報を表示するために、DOM API（またはjQueryのようなラッパーライブラリ）を使用すると便利です。
• 第2のifは、数字以外の数字を入力し、NaNが常にfalseである比較に頼っている場合を除き、冗長です。
• bgColorプロパティは長期間にわたり廃止され、CSSによって置き換えられています。だからdocument.body.style.backgroundColor = "color-goes-here";。