Question

每次用户按“添加”按钮检查数据是否输入之前，我需要检查，但是我的“if ... else”块只能在它开始接受数组中的空白条目后工作一次。我不确定为什么下次失败。任何帮助都很明显，因为我是java脚本的新手。这是我的代码片段。

<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <title>Click the button to add a new el</title>
</head>

<body>

    <label>Enter an New item to add in Stock</label>
    <br>
    <input type="text" name=" itemName" id="addItemInStock"></input>
    <br>
    <p id="errorMsg"></p>

    <button onclick="addToStock()">Add</button>

    <p id="showList"></p>
    <p id="listCount"></p>


    <script>
        var fruits = ["Banana", "Orange", "Apple", "Mango"];
        document.getElementById("showList").innerHTML = fruits;
        var newItem = document.getElementById("addItemInStock");


        function addToStock() {
            if ((newItem.value) === "") {
                document.getElementById("errorMsg").innerHTML = "Blank item cannot be added!!";

            } else {
                document.getElementById("errorMsg").style.display = "none";
                fruits.push(newItem.value);
                document.getElementById("showList").innerHTML = fruits;

                clearAndShow();
            }
        }

        function clearAndShow() {
            newItem.value = " ";
        }
    </script>

</body>

</html>

Answer 1

您的clearAndShow函数将输入元素值设置为单个空格，但if检查空字符串。

您还在第一次显示时将display设置为无，但从不将其切换回block

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.getElementById("showList").innerHTML = fruits;
    var newItem = document.getElementById("addItemInStock");


    function addToStock() {
      if ((newItem.value) === "") {
        document.getElementById("errorMsg").innerHTML = "Blank item cannot be added!!";
        document.getElementById("errorMsg").style.display = "block";
      } else {
        document.getElementById("errorMsg").style.display = "none";
        fruits.push(newItem.value);
        document.getElementById("showList").innerHTML = fruits;

        clearAndShow();
      }
    }

    function clearAndShow() {
      newItem.value = "";
    }

<label>Enter an New item to add in Stock</label>
  <br>
  </br>
  <input type="text" name=" itemName" id="addItemInStock"></input>
  <br></br>
  <p id="errorMsg"></p>

  <button onclick="addToStock()">Add</button>

  <p id="showList"></p>
  <p id="listCount"></p>

Answer 2

您需要使错误可见，与'none'相反。

document.getElementById("errorMsg").style.display = "block";

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
 document.getElementById("showList").innerHTML = fruits;
 var newItem = document.getElementById("addItemInStock");

 function addToStock() {
   if (newItem.value === "") {
     document.getElementById("errorMsg").style.display = "block";
     document.getElementById("errorMsg").innerHTML = "Blank item cannot be added!!";
   } else {
     document.getElementById("errorMsg").style.display = "none";
     fruits.push(newItem.value);
     document.getElementById("showList").innerHTML = fruits;
     clearAndShow();
   }
 }

 function clearAndShow() {
   newItem.value = "";
 }

<label>Enter an New item to add in Stock</label><br>
<input type="text" name=" itemName" id="addItemInStock"></input><br>
<p id="errorMsg"></p>
<button onclick="addToStock()">Add</button>
<p id="showList"></p>
<p id="listCount"></p>

Answer 3

您的代码只是一个小问题。当你设置newItem.value =＆＃34; ＆＃34;它使这个条件失败newItem.value！=＆＃34;＆＃34;。因此，您的AddtoStock功能无法正常工作

function addToStock() {
  if ((newItem.value) === "") {
    document.getElementById("errorMsg").innerHTML = "Blank item cannot be added!!";

  } else {
    document.getElementById("errorMsg").style.display = "none";
    fruits.push(newItem.value);
    document.getElementById("showList").innerHTML = fruits;

    clearAndShow();
  }
}

function clearAndShow() {
  newItem.value = "";
}

为什么if..else块只能工作一次

3 个答案: