无法使用Vanilla Javascript重置输入的文本字段

Question

我正在尝试使用Java脚本重设输入字段，但它无法按我打算的方式工作。 我试图理解为什么它以某种方式而不是另一种方式起作用。 您能否解释一下原因，并在可能的情况下提供任何提示。 谢谢。

我尝试重置的输入文本字段：

<input type="text" id="textInput" class="inp">

我定义了这样的按钮：

<button id="resetButton">Reset</button>

我在“重置”按钮上创建了一个事件侦听器，并按如下方式使用它。

var rButton=document.getElementById("resetButton");

rButton.addEventListener("click", function() {
    var inputTextValue=document.getElementById("textInput").value;
    inputTextValue="";
});

这是我从输入文本中获取值的JS代码：

 var inputTextValue=document.getElementById("textInput").value;

并重置值，我只是将其分配给空字符串：

inputTextValue="";

这段代码不起作用，但是当我尝试获取像这样的输入文本的引用时-

var inputText=document.getElementById("textInput");

然后尝试像这样重置值，它可以正常工作-

inputText.value =“”;

所以，我试图理解，这两种方式有什么区别，我在做什么错。

Answer 1

当您将value属性分配给变量时，这正是您的工作。 您只是在分配值， 而不是创建引用 -将整个元素设置为变量并更新value属性，或立即更新value属性：

document.getElementById("textInput").value = "";

要么：

var input = document.getElementById("textInput");
input.value = "";

Answer 2

您正在将输入字段的当前值复制到inputTextValue字符串中，然后将该副本替换为空字符串。 这意味着您实际上并没有更改输入字段。

尝试

document.getElementById("textInput").value = "";

要么

 var input = document.getElementById("textInput");
 input.value = "";

代替。

Answer 3

这样您可以重置或选择。

$(document).on("click", "#resetButton", function() {
    var textInputValue = $("#textInput").val(); // get value
    $("#textInput").val(""); // or reset value
});

要么

var input = document.getElementById("textInput");
var resetButton = document.getElementById("resetButton");

resetButton.addEventListener("click", function() {
    input.val(); // get value
    input.val(""); // or reset value
});

编辑：我还没有看到Javascript标签。 抱歉。 :)