Funktionsaufrufe, aber Element verschwindet

Question

Hallo Ich versuche, eine einfache Tierkreis-Webseite, die die Antwort von einem Array mit einer Funktion, die eine for-Schleife und eine if-Anweisung hat, greifen, aber die Antwort, wenn ich auf die Schaltfläche weiterhin nur klicken blinken und verschwinden. Wie behalte ich die Antwort auf der Seite? Hier ist der 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> 

Hier ist die Funktion:

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

Hey, ich denke, das Problem, dass, wenn Sie auf die Schaltfläche klicken, wird Ihre Form und blinkt Ihre Seite vorgelegt. Sie können Event.preventDefault() und Event.stopPropagation() hinzufügen, um es zu beheben. Ich machte eine demo für mehr Klarheit.

function getZodiac(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 

    // the rest of your logic 
}