The Engineer The Engineer - 6 months ago 10
CSS Question

This JavaScript code is not working. Have I got the syntax wrong or is it something else?

This code is not working as I would have liked it to, but I am not sure of the problem.



Code:

<body>
var randNumForQuote = Math.floor((Math.random() * 11));

if (randNumForQuote == 0) {
document.getElementById("quoteDiv").innerHTML = "Hello";
} else if (randNumForQuote == 1) {
document.getElementById("quoteDiv").innerHTML = "Hello1";
} else if (randNumForQuote == 2) {
document.getElementById("quoteDiv").innerHTML = "Hello2";
} else if (randNumForQuote == 3) {
document.getElementById("quoteDiv").innerHTML = "Hello3";
} else if (randNumForQuote == 4) {
document.getElementById("quoteDiv").innerHTML = "Hello4";
} else if (randNumForQuote == 5) {
document.getElementById("quoteDiv").innerHTML = "Hello5";
} else if (randNumForQuote == 6) {
document.getElementById("quoteDiv").innerHTML = "Hello6";
} else if (randNumForQuote == 7) {
document.getElementById("quoteDiv").innerHTML = "Hello7";
} else if (randNumForQuote == 8) {
document.getElementById("quoteDiv").innerHTML = "Hello8";
} else if (randNumForQuote == 9) {
document.getElementById("quoteDiv").innerHTML = "Hello9";
} else if (randNumForQuote == 10) {
document.getElementById("quoteDiv").innerHTML = "Hello10";
}

<div id="quoteDiv"></div>
</body>





I have limited experience in JavaScript, so do not understand the problem too well.

I am expecting the div to say one of the outputs (eg.
Hello, Hello1, Hello2, etc.
)

Answer

You need to put the JavaScript code inside script tag and run the code after page is loaded so put inside window.onload callback, which fires at the end of the document loading process.

<body>
  <script>
    window.onload = function() {
      var randNumForQuote = Math.floor((Math.random() * 11));

      if (randNumForQuote == 0) {
        document.getElementById("quoteDiv").innerHTML = "Hello";
      } else if (randNumForQuote == 1) {
        document.getElementById("quoteDiv").innerHTML = "Hello1";
      } else if (randNumForQuote == 2) {
        document.getElementById("quoteDiv").innerHTML = "Hello2";
      } else if (randNumForQuote == 3) {
        document.getElementById("quoteDiv").innerHTML = "Hello3";
      } else if (randNumForQuote == 4) {
        document.getElementById("quoteDiv").innerHTML = "Hello4";
      } else if (randNumForQuote == 5) {
        document.getElementById("quoteDiv").innerHTML = "Hello5";
      } else if (randNumForQuote == 6) {
        document.getElementById("quoteDiv").innerHTML = "Hello6";
      } else if (randNumForQuote == 7) {
        document.getElementById("quoteDiv").innerHTML = "Hello7";
      } else if (randNumForQuote == 8) {
        document.getElementById("quoteDiv").innerHTML = "Hello8";
      } else if (randNumForQuote == 9) {
        document.getElementById("quoteDiv").innerHTML = "Hello9";
      } else if (randNumForQuote == 10) {
        document.getElementById("quoteDiv").innerHTML = "Hello10";
      }
    }
  </script>

  <div id="quoteDiv"></div>
</body>


Although you ca reduce the code

<body>
  <script>
    window.onload = function() {
      var randNumForQuote = Math.floor((Math.random() * 11));
      document.getElementById("quoteDiv").innerHTML = "Hello" + (randNumForQuote ? " " + randNumForQuote : '');
    }
  </script>

  <div id="quoteDiv"></div>
</body>

Comments