javascript - 无法清除 JavaScript 中按钮的变量输入

Question

我正在制作一个按钮，将文本输入附加到列表中，希望以后能添加更多。一切似乎都运行良好，除了清除输入后，您可以再次点击按钮，即使我更改了变量，它也会重新填充相同的变量值。我的文本输入是#MercInt。代码:

$(document).ready(function(){

  var $inputVal = $("#MercInt").val();
  var list = "#intList";
  var listItem 

  function mercList (){
    listItem = "<li>" + $inputVal + "</li>";
    $(list).append(listItem);
    }

  function mercWarning (){
    };


  $("button").on("click", function (event){
     event.preventDefault();
     if (!$inputVal) { mercWarning()
      } else {      
       mercList()
       $("#MercInt").val("");
       listItem = ("Doesn't matter what I put here");
       }
  }) // end button.on.click

}); //end of doc.ready

我对此很陌生，所以如果您对代码还有任何一般性评论，请随意。谢谢。

Answer 1

您仅在页面加载时设置 $inputVal，而不是每次按下按钮时设置。

将 $inputVal 的设置移至点击处理程序中，一切都会正常。

$("button").on("click", function (event){
 event.preventDefault();
 var $inputVal = $("#MercInt").val(); //Add this line
 if (!$inputVal) { mercWarning()
  } else {      
   mercList()
   $("#MercInt").val("");
   listItem = ("Doesn't matter what I put here");
   }
})