field.valueが空のときに入力ボタンを無効にする

Question

これはjqueryで解答しているのを見ましたが、私はJavaScriptでどのように行うことができますか？これまでのところ、私は次のことを考え出しましたが、nameF.valueを正しくキャプチャしていないことを理解しています。

var nameF = document.getElementById("name-field"); 
 

 
var formButton = document.getElementById("form-button"); 
 

 
function go() { 
 
    if (nameF.value == "") { 
 
    formButton.classList.add("notclickable"); 
 
    } 
 
} 
 

 
go();

#form-button { 
 
    cursor: pointer; 
 
    outline: none; 
 
    border: none; 
 
    font-family: $body-font; 
 
    font-size: 14px; 
 
    padding: 16px; 
 
    color: #fff; 
 
    font-weight: 800; 
 
    background-color: #000; 
 
    position: relative; 
 
    border-radius: 2px; 
 
    opacity: 1; 
 
} 
 

 
#form-button.notclickable { 
 
    opacity: .1; 
 
    pointer-events: none; 
 
}

<input type="text" name="name" class="form-style form-field" id="name-field" placeholder="Your name"> 
 
<input type="submit" value="Send" id="form-button"> 
 
https://stackoverflow.com/questions/ask#

私はバニラを使用して、jQueryのせずに、それをどのように行うことができますか？

ありがとうございました！

Answer 1

nameFとadd()の代わりに.toggle()に割り当てられたイベントハンドラが必要です。

.toggle()は、クラスを追加または削除する必要があるかどうかを示すオプションの第2引数を受け取ります。そこで、比較する文字列を渡します。

var nameF = document.getElementById("name-field"); 
 

 
var formButton = document.getElementById("form-button"); 
 

 
function go() { 
 
    formButton.classList.toggle("notclickable", nameF.value == ""); 
 
} 
 

 
go(); 
 

 
nameF.addEventListener("input", go);

#form-button { 
 
    cursor: pointer; 
 
    outline: none; 
 
    border: none; 
 
    font-family: $body-font; 
 
    font-size: 14px; 
 
    padding: 16px; 
 
    color: #fff; 
 
    font-weight: 800; 
 
    background-color: #000; 
 
    position: relative; 
 
    border-radius: 2px; 
 
    opacity: 1; 
 
} 
 

 
#form-button.notclickable { 
 
    opacity: .1; 
 
    pointer-events: none; 
 
}

<input type="text" name="name" class="form-style form-field" id="name-field" placeholder="Your name"> 
 
<input type="submit" value="Send" id="form-button"> https://stackoverflow.com/questions/ask#

また、あなたはボタンを無効にするクラスを必要としないことに注意してください。 :disabledセレクタでdisabledプロパティを使用することができます。これは単に機能を無効にするのではなく、機能を無効にします。

var nameF = document.getElementById("name-field"); 
 

 
var formButton = document.getElementById("form-button"); 
 

 
function go() { 
 
    formButton.disabled = nameF.value == ""; 
 
} 
 

 
go(); 
 

 
nameF.addEventListener("input", go);

#form-button { 
 
    cursor: pointer; 
 
    outline: none; 
 
    border: none; 
 
    font-family: $body-font; 
 
    font-size: 14px; 
 
    padding: 16px; 
 
    color: #fff; 
 
    font-weight: 800; 
 
    background-color: #000; 
 
    position: relative; 
 
    border-radius: 2px; 
 
} 
 

 
#form-button:disabled { 
 
    opacity: .1; 
 
    pointer-events: none; 
 
}

<input type="text" name="name" class="form-style form-field" id="name-field" placeholder="Your name"> 
 
<input type="submit" value="Send" id="form-button"> https://stackoverflow.com/questions/ask#

Answer 2

そのような何かを試してみてください！

var nameF = document.getElementById("name-field"); 
 

 
var formButton = document.getElementById("form-button"); 
 

 
function onChangeContent(e) { 
 
    formButton.disabled = e.target.value !== '' ? false : true; 
 
} 
 

 
nameF.addEventListener('keyup', onChangeContent);

<input type="text" name="name" class="form-style form-field" id="name-field" placeholder="Your name"> 
 
<input type="submit" value="Send" id="form-button" disabled>