檢查所有文本輸入是否為空，是否顯示if / else語句提示？

Question

這里的初學者。 我正在嘗試使用一個條件檢查文本輸入是否已填寫，否則，如果為空，則提示警報，但它似乎沒有任何作用？ 我的JS布局不好嗎？ 這是我的jsfiddle。 https://jsfiddle.net/rtomino/4ywq9n3n/2/

謝謝！！

<div>
    <label for="cand1">Candidate 1</label>
    <input class="candidate" id="cand1" placeholder="Candidate">
</div>

<div>
    <label for="cand2">Candidate 2</label>
    <input class="candidate" id="cand2" placeholder="Candidate">
</div>

<div>
    <label for="cand3">Candidate 3</label>
    <input class="candidate" id="cand3" placeholder="Candidate">
</div>

JS

function candidateNames() {
   var inputs = document.getElementsByTagName("input");
   var result = [];
 for ( var i = 0; i < inputs.length; i += 1 ) {
   result[i] = inputs[i].value;

  if (inputs === '' || null || 0) {
      alert('Need to fill inputs');
  }  
}
  document.getElementById("candidateName1").innerHTML = result[0];
  document.getElementById("candidateName2").innerHTML = result[1];
  document.getElementById("candidateName3").innerHTML = result[2];
}

Answer 1

您正在檢查輸入數組是否為空，而不是當前輸入值是否為空。

看到我的內聯評論。

function candidateNames() {
  var inputs = document.getElementsByTagName("input");
  var result = [];
  for ( var i = 0; i < inputs.length; i += 1 ) {
      result[i] = inputs[i].value;

      if (inputs[i].value == '') { // check if value is empty
          alert('Need to fill inputs');
          return; // stop the function
      }

}
    document.getElementById("candidateName1").innerHTML = result[0];
    document.getElementById("candidateName2").innerHTML = result[1];
    document.getElementById("candidateName3").innerHTML = result[2];
}

//Event listener to calculate button to call all above functions
document.getElementById("btn").addEventListener("click", calculateVotes, false);

function calculateVotes() {
  candidateNames();
}

Answer 2

您正在檢查（inputs ===''|| null || 0），這是錯誤的，因為輸入是一個數組，您需要執行以下操作：

function candidateNames() {console.log('here');
  var inputs = document.getElementsByTagName("input");
  var result = [];
  for ( var i = 0; i < inputs.length; i += 1 ) {
      result[i] = inputs[i].value;

      if (results[i] === '' || null || 0) {
          alert('Need to fill inputs');
      }

}
    document.getElementById("candidateName1").innerHTML = result[0];
    document.getElementById("candidateName2").innerHTML = result[1];
    document.getElementById("candidateName3").innerHTML = result[2];
}