我不太确定出什么问题了,我在浏览器中运行了代码,似乎图像在完全消失之前短暂地闪烁了一下。我尝试使用window.onload,但在单击按钮之前无法正常工作或显示图片。
window.onload = function final() {
var gender = document.querySelector('input[name = "q1"]:checked').value;
var color = document.querySelector('input[name = "q2"]:checked').value;
if (gender == "girl" && color == "blue") {
alert("girl blue");
finalpic();
} else if (gender == "girl" && color == "red") {
alert("girl red");
} else if (gender == "guy" && color == "blue") {
alert("guy blue");
} else if (gender == "guy" && color == "red") {
alert("guy red");
}
}
function finalpic() {
var img1 = document.createElement("img");
img1.src = "https://i.imgur.com/VyEdgNu.jpg";
var sauce = document.getElementById("results");
sauce.appendChild(img1);
}
<form>
<fieldset>
<legend> Survey</legend>
<p>Gender</p>
<input type="radio" id="op1" name="q1" value="girl"> Girl<br>
<input type="radio" id="op2" name="q1" value="guy"> Guy<br>
<p>Fav Color</p>
<input type="radio" name="q2" value="blue">Blue <br>
<input type="radio" name="q2" value="red">Red<br><br>
<input type="submit" value="Submit" onclick="final()">
<div id="results">
</div>
</fieldset>
</form>
我不认为stackoverflow具有No Wrap选项,并且默认为Onload,所以这里也是jsfiddle链接。
答案 0 :(得分:0)
您的表单正在提交,这将导致页面重新加载。为了停止刷新页面并放置图像,您应该阻止表单提交。
最简单的方法是添加一个内联事件处理程序:
<form onsubmit="return false">
代替您的
<form>