我的图片没有出现，DOM加载问题？

Question

我不确定是什么问题，我在浏览器中运行了代码，图像似乎短暂闪烁，然后完全消失。我尝试使用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链接。

https://jsfiddle.net/thbu703m/

Answer 1

您的表单正在提交，这将导致页面重新加载。为了停止刷新页面并放置图像，您应防止提交表单。

最简单的方法是添加一个内联事件处理程序：

 <form onsubmit="return false">

代替您的

 <form>