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

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 (“候选人”)。

你的代码应该是这样的:

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;
}

演示:

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;
}

<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>

注意:

注意 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;
}

演示:

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;
}

<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>