javascript - 下拉正确答案javascript后显示图像

Question

我有这个代码。目标应该是根据选择标签代码的值显示图像。（更详细；如果答案正确，则显示“检查”图像，如果答案错误，则显示“x”。我有一个基本代码并对其进行了大量修改和编写，但在这一步中卡住了，因为图像没有显示。有什么想法吗？ :-?

jsfiddle：https ://jsfiddle.net/angelsmall13/cb4o9gsr/44/

function finalScore(round) {

  var correct = 0;

  var selectValue;

  var questions = document.getElementsByClassName("question");

  var numOfQuestions = questions.length;

  for (var i = 0; i < questions.length; i++) { //begin for loop

    //get the value of the select element
    selectValue = questions[i].options[questions[i].selectedIndex].value;

    //if the value equals right
    if (selectValue === "corect") { //begin if then

      //increment the correct variable
      correct = correct + 1;
  var img = new Image();
  img.src = 'https://i.ibb.co/4JKs8RV/check.jpg';
  
    } else if (selectValue === "gresit") { 

      correct = correct + 0;   
  var img = new Image();
  img.src = 'https://i.ibb.co/XWSYMSg/wrong.jpg';      

    } else if (selectValue === "gresit")
{ 

      correct = correct + 0;
  var img = new Image();
  img.src = 'https://i.ibb.co/XWSYMSg/wrong.jpg';
    } 

  } //end for loop


  if (round === false) {
    //get the percentage of correct answers(not rounded)
    document.getElementById("scoreDisplay").innerHTML = correct;
  } else {

    //display the rounded value
    document.getElementById("scoreDisplay").innerHTML = correct;

  } //end if then else

} //end function

<p>

What is the gender for Madchen?
<select class ="question" id="1howold">
    <option value="corect">Das</option>
    <option value="gresit">Die</option>
    <option value="gresit">Der</option>
</select><br /><br />

What's the gender for " Mann"
<select class="question" id="2relationshipstatus">
    <option value="corect">Der</option>
    <option value="gresit">Die</option>
    <option value="gresit">Das</option>
</select><br /><br />
What is the gender for "Frau"?
<select class="question" id="3location">
    <option value="corect">Die</option>
    <option value="gresit">Der</option>
    <option value="gresit">Das</option>
</select><br /><br />

<button type="button" onclick="finalScore(true)">Submit</button>

<div id="scoreDisplay">score goes here</div> 
</p>

标签： javascript

Answer 1

 function finalScore(round) {

  var correct = 0;

  document.querySelectorAll('.ansimg').forEach(function(a) {
  a.remove()
})

  var selectValue;

  var questions = document.getElementsByClassName("question");

  var numOfQuestions = questions.length;

  for (var i = 0; i < questions.length; i++) { //begin for loop

    //get the value of the select element
    selectValue = questions[i].options[questions[i].selectedIndex].value;

    //if the value equals right
    if (selectValue === "corect") { //begin if then

      //increment the correct variable
      correct = correct + 1;
      var x = document.createElement("IMG");
      x.setAttribute("src", "https://i.ibb.co/4JKs8RV/check.jpg");
      x.setAttribute("class", "ansimg");
      x.setAttribute("width", "22");
      x.setAttribute("height", "22");
      document.getElementById("img_"+i).appendChild(x);
  //var img = new Image();
  //img.src = 'https://i.ibb.co/4JKs8RV/check.jpg';
  
    } else if (selectValue === "gresit") { 

      correct = correct + 0;  
      var x = document.createElement("IMG");
      x.setAttribute("src", "https://i.ibb.co/XWSYMSg/wrong.jpg");
      x.setAttribute("class", "ansimg");
      x.setAttribute("width", "22");
      x.setAttribute("height", "22");
      document.getElementById("img_"+i).appendChild(x);
  //var img = new Image();
  //img.src = 'https://i.ibb.co/XWSYMSg/wrong.jpg';      

    } else if (selectValue === "gresit")
{ 

      correct = correct + 0;
  var img = new Image();
  img.src = 'https://i.ibb.co/XWSYMSg/wrong.jpg';
    } 

  } //end for loop


  if (round === false) {
    //get the percentage of correct answers(not rounded)
    document.getElementById("scoreDisplay").innerHTML = correct;
  } else {

    //display the rounded value
    document.getElementById("scoreDisplay").innerHTML = correct;

  } //end if then else

} //end function

<p>

What is the gender for Madchen?
<select class ="question" id="1howold">
    <option value="corect">Das</option>
    <option value="gresit">Die</option>
    <option value="gresit">Der</option>
</select><span id="img_0"></span><br /><br />

What's the gender for " Mann"
<select class="question" id="2relationshipstatus">
    <option value="corect">Der</option>
    <option value="gresit">Die</option>
    <option value="gresit">Das</option>
</select><span id="img_1"></span><br /><br />
What is the gender for "Frau"?
<select class="question" id="3location">
    <option value="corect">Die</option>
    <option value="gresit">Der</option>
    <option value="gresit">Das</option>
</select><span id="img_2"></span><br /><br />

<button type="button" onclick="finalScore(true)">Submit</button>

<div id="scoreDisplay">score goes here</div> 
</p>

我已修改您的代码，请检查代码段