要素が1つ存在するときに要素を削除する

Question

私は、私のnooby Javascriptに関する質問に戻ります。私はフォームの検証に取り組んでいます。名前が入力されたかどうかを確認するテキストを追加しています。私が実行している問題は、名前をつけないと名前をつけないというメッセージが他の要素に現れ、その逆の場合もありますが、別の要素が選ばれる。ある要素が存在するときに要素が表示されないようにする何らかの方法がありますか？私はあなた/女の子があなたの日から時間を割いて、笑いを助けることを感謝します。 :)

コード：

var complete = document.getElementById('button'); 
 

 
complete.addEventListener('click', validate); 
 

 
function validate() { 
 

 
    var textBox = document.getElementById('name'); 
 
    var red = document.getElementById('nah'); 
 
    var green = document.getElementById('yah'); 
 

 
    if (textBox.value === '') { 
 
    red.style.display = 'block'; 
 
    } else { 
 
    green.style.display = 'block'; 
 
    } 
 
}

#nah { 
 
    display: none; 
 
    color: red; 
 
} 
 

 
#yah { 
 
    color: green; 
 
    display: none; 
 
} 
 

 
button { 
 
    display: block; 
 
    margin-top: 50px; 
 
    border: 0.1px solid red; 
 
    background: red; 
 
    color: white; 
 
    font-size: 30px; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
}

<input type="text" id="name"> 
 

 
<p id="nah">Please Enter Name!</p> 
 
<p id="yah">Thank you!</p> 
 

 
<button id="button">Complete Form</button>

Answer 1

使用すると、1件のメッセージを表示するときは、他のものを非表示にする必要があります。

var complete = document.getElementById('button'); 
 

 
complete.addEventListener('click', validate); 
 

 
function validate() { 
 

 
    var textBox = document.getElementById('name'); 
 
    var red = document.getElementById('nah'); 
 
    var green = document.getElementById('yah'); 
 

 
    if (textBox.value === '') { 
 
    red.style.display = 'block'; 
 
    green.style.display = 'none'; 
 
    } else { 
 
    green.style.display = 'block'; 
 
    red.style.display = 'none'; 
 
    } 
 
}

#nah { 
 
    display: none; 
 
    color: red; 
 
} 
 

 
#yah { 
 
    color: green; 
 
    display: none; 
 
} 
 

 
button { 
 
    display: block; 
 
    margin-top: 50px; 
 
    border: 0.1px solid red; 
 
    background: red; 
 
    color: white; 
 
    font-size: 30px; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
}

<input type="text" id="name"> 
 

 
<p id="nah">Please Enter Name!</p> 
 
<p id="yah">Thank you!</p> 
 

 
<button id="button">Complete Form</button>

Answer 2

最も簡単な方法は、単に検証中に他のメッセージを非表示にすることです：

function validate() { 

    var textBox = document.getElementById('name'); 
    var red = document.getElementById('nah'); 
    var green = document.getElementById('yah'); 

    if (textBox.value === '') { 
    red.style.display = 'block'; 
    green.style.display = 'none'; //hide the other element 
    } else { 
    green.style.display = 'block'; 
    red.style.display = 'none'; //hide the other element 
    } 
} 

あなたはデータを使用して、より洗練された方法でそれを行うことができ、視認性を制御する属性が、このおそらく良いスタートです。