Question

您好我正在尝试创建一个简单的生肖网页，它使用具有for循环和if语句的函数从数组中获取答案，但是当我单击按钮时答案仍然只是闪烁并消失。如何在页面上保留答案？这是HTML：

<div class="header"><h1 class="zodiactitle">Learn your Life's Mysteries w/ the </br>ZODIAC</h1></div>
 <form>
  <input id="zodiac" placeholder="   ENTER YOUR ZODIAC">
  <span class="click"><button class="button" onclick="getZodiac()">Click to find out more</button></span>
</form>

<div class="details">
<h3 id="birthdate"></h3>
<h3 id="zodiacsign"></h3>
</div>

这是功能：

function getZodiac(){
  var sign = document.getElementById("zodiac").value;

  for( i = 0; i < zodiacSigns.length; i++){
  //if statement to match correct input to correct zodiac
  if(sign == zodiacSigns[i].sign){
    document.getElementById("birthdate").innerHTML = zodiacSigns[i].birthdate;
    document.getElementById("zodiacsign").innerHTML = zodiacSigns[i].zodiac;
    return;

   }
  }
}

Answer 1

嘿我认为问题在于，当您点击该按钮时，表单正在提交并且您的页面会闪烁。您可以添加Event.preventDefault()和Event.stopPropagation()来修复它。为了更清晰，我制作了demo。

[a-z|A-Z|0-9|\-|_]

函数调用但元素消失

1 个答案: