显示图片后下拉右键回答javascript



我有这个代码。目标应该是根据选择标签代码的值显示图像。(更详细的是,如果答案正确,显示"检查"图像,如果答案错误,显示"x"图像。我有一个基本代码,并在上面进行了大量修改和书写,但由于图像无法显示,我在这一步上遇到了困难。知道吗?:-?

Js文件: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>

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>

我已经修改了你的代码,请检查片段

最新更新