2017-03-12 20 views
1

こんにちは私は、ループとif文を持つ関数を使って配列からの答えを取得する簡単な黄道帯のWebページを作成しようとしていますが、フラッシュして消える。どのように答えをページに保持するのですか?ここで は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; 

    } 
    } 
} 
+0

HTMLコードを掲載できますか?少なくとも "birthdate"と "zodiacsign"の要素でお願いします。 – Psi

+0

'getZodiac()がどこで呼び出されていますか? 「

」と送信ボタンが含まれていますか?そうであれば、フォームはその「アクション」にナビゲートするか、または少なくとも現在のページをリフレッシュすることができる。 [フォームが送信されないようにする方法](https://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted) –

+0

これはPythonですか?セミコロンはどこにあるのですか? – mehulmpt

答えて

1

ねえ、私はこの問題は、あなたがボタンをクリックすると、フォームが送信し、あなたのページが点滅していることだと思います。 Event.preventDefault()Event.stopPropagation()を追加して修正できます。私はより明確にするためにdemoを作った。

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

    // the rest of your logic 
} 
+0

これはあなたのコードでは動作しますが、私のものではありません。私はそれを追加しましたが、機能は依然として答えを点滅させるだけです。 –

+0

関数のパラメータとして 'e'を追加しましたか? – dawchihliou

+0

デモでイベントリスナーを追加し、htmlの 'onClick =" getZodiac() "'を削除してみることはできますか? – dawchihliou

関連する問題