如果在此代码中输入为空，如何添加？

Question

如果输入为空，我有点坚持如何添加此代码，以发出警报。我会在第一个中添加另一个功能吗？任何提示将不胜感激！

function getCandidateNames() {
    var inputs = document.getElementsByTagName("input");
    var result = [];
    for (var i = 0; i < inputs.length; i += 1) {
        if (inputs[i].getElementsByTagName("candidate")) {
            result.push(inputs[i].value);
        }
    }
    return result;
}

function putCandidateNames(names) {
    document.getElementById("candidateName1").innerHTML = names[0];
    document.getElementById("candidateName2").innerHTML = names[1];
    document.getElementById("candidateName3").innerHTML = names[2];
}

function candidateNames() {
    putCandidateNames(getCandidateNames());
}

HTML

<fieldset id="candidates">
    <legend>Candidates</legend>
    <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="candName" placeholder="Candidate">
    </div>
    <div>
        <label for="cand3">Candidate 3</label>
        <input class="candidate" id="candName" placeholder="Candidate">
    </div>
</fieldset>

Answer 1

您的代码中存在许多需要修复的问题：

• 您无法对页面中的多个元素使用相同的ID id="candName"。
• 此代码inputs[i].getElementsByTagName("candidate")完全错误，您应该使用getElementsByClassName("candidate")，因为您没有将candidate标记用作类。
• 而不是获取inputs nodeList，而是使用inputs[i].getElementsByTagName("candidate")对其进行迭代，您只需使用document.getElementsByClassName("candidate")。

这应该是你的代码：

function getCandidateNames() {
  var inputs = document.getElementsByClassName("candidate");
  var result = [];
  if (Array.prototype.some.call(inputs, function(input) {
      return input.value === "";
    })) {
    alert("Inputs should not be empty!!!");
    return false;
  }
  Array.prototype.forEach.call(inputs, function(input) {
    result.push(input.value);
  });
  return result;
}

<强>演示：

＆＃13;

＆＃13;

function getCandidateNames() {
  var inputs = document.getElementsByClassName("candidate");
  var result = [];
  if (Array.prototype.some.call(inputs, function(input) {
      return input.value === "";
    })) {
    alert("Inputs should not be empty!!!");
    return false;
  }
  Array.prototype.forEach.call(inputs, function(input) {
    result.push(input.value);
  });
  console.log(result);
  return result;
}

＆＃13;

<fieldset id="candidates">
  <legend>Candidates</legend>
  <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="candName" placeholder="Candidate">
  </div>
  <div>
    <label for="cand3">Candidate 3</label>
    <input class="candidate" id="candName2" placeholder="Candidate">
  </div>
</fieldset>
<button onclick="getCandidateNames()">Validate</button>

＆＃13;

＆＃13;

＆＃13;

注意：

请注意使用Array.prototype.forEach.call和Array.prototype.some.call，它们用于循环nodeList借用JavaScript Array内置函数。

替代：

这是使用简单语法的替代方法：

function getCandidateNames() {
  var inputs = document.getElementsByClassName("candidate");
  var result = [];
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].value !== "") {
      result.push(inputs[i].value);
    } else {
      alert("Inputs can't be empty !!!");
      return false;
    }
  }
  return result;
}

<强>演示：

＆＃13;

＆＃13;

function getCandidateNames() {
  var inputs = document.getElementsByClassName("candidate");
  var result = [];

  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].value !== "") {
      result.push(inputs[i].value);
    } else {
      alert("Inputs can't be empty !!!");
      return false;
    }
  }
  console.log(result);
  return result;
}

＆＃13;

<fieldset id="candidates">
  <legend>Candidates</legend>
  <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="candName" placeholder="Candidate">
  </div>
  <div>
    <label for="cand3">Candidate 3</label>
    <input class="candidate" id="candName2" placeholder="Candidate">
  </div>
</fieldset>
<button onclick="getCandidateNames()">Validate</button>

＆＃13;

＆＃13;

＆＃13;