無法使用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標簽。 抱歉。 :)