すべてのフィールドが入力されるまでJavascriptを無効にする

Question

これを解決する助けに感謝します。 すべての要素に対してイベントリスナーを機能させる必要があります。したがって、基本的にname、last-name、つまりすべてのフィールドを入力すると、ボタンのみが有効になります。フィールドのいずれかが空であっても、ボタンは無効になります。

(function() { 
"use strict"; 

var knapp = document.getElementById('skicka'); 

knapp.disabled = true; 

var f=document.getElementById('fornamn'); 
var e=document.getElementById('efternamn'); 
var p=document.getElementById('passnr'); 
var n=document.getElementById('nat'); 

e.addEventListener('change',function(){ 

    if(e.value===''){ 

knapp.disabled=true; 
    } 

else{ 
    knapp.disabled=false; 
} 
    }); 

    })(); 

Answer 1

let inputs = document.querySelectorAll('.mustfill'), 
 
    knapp = document.querySelector('#skicka') 
 
knapp.disabled = true 
 

 
for (i = 0; i < inputs.length; i++){ 
 
    inputs[i].addEventListener('input',() => { 
 
    let values = [] 
 
    inputs.forEach(v => { 
 
     values.push(v.value) 
 
    }) 
 
    if (values.includes('')) { 
 
     knapp.disabled = true 
 
    } else { 
 
     knapp.disabled = false 
 
    } 
 
    }) 
 
}

<form> 
 
    <input class=mustfill id=fornamn type=text><br> 
 
    <input class=mustfill id=efternamn type=text><br> 
 
    <input class=mustfill id=passnr type=text><br> 
 
    <input class=mustfill id=nat type=text><br> 
 
    <input type=button id=skicka value=Complete> 
 
</form>

これはそれを行います。 値の配列1、入力フィールドの配列1。入力のためのクラスを追加することをお勧めします。例えば、mustfillのように、すべてのID、クラスだけを指定する必要はありません。そして、inputのイベントハンドラはchangeではないので、入力時にボタンが有効になっているのがわかります。 .includes()は、ES6の時点で新しいもので、values配列に空の文字列が含まれているかどうかをチェックするメソッドです。

Answer 2

var elements = document.querySelectorAll("#fornamn, #efternamn, #passnr, #nat"); 
for (var i = 0; i < elements.length; i++) { 
    elements[i].addEventListener("change", function() { 
    if(document.getElementById("fornamn").value == "" && document.getElementById("passnr").value == "" && document.getElementById("nat").value = "" && document.getElementById("efternamn").value == "") { 
     knapp.disabled=true; 
    } else { 
     knapp.disabled=false; 
    } 
    }); 
}