我的图片没有出现,DOM加载有问题吗?

时间:2019-12-01 05:37:40

标签: javascript image dom onload appendchild

我不太确定出什么问题了,我在浏览器中运行了代码,似乎图像在完全消失之前短暂地闪烁了一下。我尝试使用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/

1 个答案:

答案 0 :(得分:0)

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

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

 <form onsubmit="return false">

代替您的

 <form>