Javascript/Jquery 运行页面呈现后的脚本

Question

我正在尝试让 correct[] 和 wrong[] 这两个函数的反馈在用户回答问题时显示出来。我添加了 jQuery ready 函数来尝试让我想要的一切都出现在提示之前，但没有成功。我已经多次将 ready 函数写入我的代码，但没有成功。有人可以帮忙吗？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
<meta charset="UTF-8">
<title>Simple Math Quiz</title>
<script>
      $("document").ready(function() {
         $("body").css("background-color", "green");
      });
</script>
</head> 
<body>
   <br><br>
   <p><em><strong>Feedback</strong></em></p><p><br><br>
      <script>
//Question array   
   var question = ["1. What is 1+1?",
                         "2. What is 2+2?",
                         "3. What is 3+3?",
                         "4. What is 4+4?",
         "5. What is 5+5?"
                        ];
//Other Variables
   var qlength = question.length;
   var counter = 0;
         var answer = ["2", "4", "6", "8", "10"];
//First box to tell the viewer whats going on
   alert('Answer the following 5 questions to determine if you are 1st grade smart.');
//Loop that asks the questions
          for (var i = 0; i < qlength; i++)
    {
     var userAnswer = prompt(question[i]); //Stores the answer to each question in userAnswer
      //Actions for correct answer
      if (userAnswer == answer[i])
      {
       alert('Correct');       
       correct(i);
       var counter = counter + 1;      //Adds one to the counter for correct answers           
      }
      //Actions for wrong answer
      else
      {      
       alert('Wrong');
       wrong(i);
      }            
    }
//Functions
   function correct(i)
   {
    document.write(i + 1, ". Correct" + "<br>");
   }          
   function wrong(i)
   {
    document.write(i + 1, ". Wrong, correct answer = ", answer[i], "<br>");
   }
//Calculates the results based on the counter
   document.write("<br>You got " + counter + " answers out of 5 correct.");    
  </script>
 </p>
</body>

</html>

Answer 1

永远不要在加载后使用 document.write。它擦除页面和脚本。而是更新标签 - 在这里我使用你已经使用的 jQuery 来附加答案

// These needed to be and STAY global
// Question array   
var question = ["1. What is 1+1?",
  "2. What is 2+2?",
  "3. What is 3+3?",
  "4. What is 4+4?",
  "5. What is 5+5?"
];
//Other Variables
var qlength = question.length;
var counter = 0;
var answer = ["2", "4", "6", "8", "10"];


$("document").ready(function() {
  $("body").css("background-color", "green");
  ask();
  $("#result").append("<br>You got " + counter + " answer"+(counter==1?"":"s")+" out of 5 correct.");

});


function ask() {
  //First box to tell the viewer whats going on
  alert('Answer the following 5 questions to determine if you are 1st grade smart.');
  //Loop that asks the questions
  for (var i = 0; i < qlength; i++) {
    var userAnswer = prompt(question[i]); //Stores the answer to each question in userAnswer
    //Actions for correct answer
    if (userAnswer == answer[i]) {
      alert('Correct');
      correct(i);
      counter++; //Adds one to the counter for correct answers           
    }
    //Actions for wrong answer
    else {
      alert('Wrong');
      wrong(i);
    }
  }
}


function correct(i) {
  $("#result").append(i + 1, ". Correct" + "<br>");
}

function wrong(i) {
  $("#result").append(i + 1, ". Wrong, correct answer = ", answer[i], "<br>");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><em> <strong> Feedback </strong></em>
</p>
<p id="result"></p>

Javascript/Jquery 运行页面呈现后的脚本

Javascript/Jquery run script after page is rendered

javascript

jquery

document-ready

domready

Javascript/Jquery 运行 页面呈现后的脚本

Javascript/Jquery run script after page is rendered

javascript

jquery

document-ready

domready

Javascript/Jquery 运行页面呈现后的脚本