stackoom
  简体   繁体   中英

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

 原文  2016-05-29 08:03:52  2   3    javascript/ html/ css

Question

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. )

3 answers

solution1
 2 ACCPTED  2016-05-29 08:06:51

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>

solution2
 0  2016-05-29 08:09:23

Javascript needs to be in a script tag if it's in html, and you need to have the div come before the script tag. 

 <body> <div id="quoteDiv"></div> <script> 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> </body>

solution3
 0  2016-05-29 08:11:36

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



</body>
<script>
// self executing function here

   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>

</html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Fastify schema validation isn't working. Do I have something configured the wrong way? javascript if else statement not working. It returns singleStory even if I click on the twoStory image. I have tried != and --- CubeTextureLoader() not working. Or I'm doing something wrong ngRoute not working. is there something i am doing wrong I have a loop in the Javascript console that is not working. A Why I got wrong output in on this Javascript code? I am trying to run a script but the steps I have taken are not working. Where have I gone wrong? Is there something wrong with the custom gulp-file I wrote, or do I have to add something else? if else statement in javascript is not working. only in else statement How can I shorten my code with for() or something else in JavaScript?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM