Question

我正在尝试将输入框的值更改为3.到目前为止，我所做的是为输入框创建变量。该变量名为“input”。目前，输入框的值为“20”。当我在控制台中输入“input”时，这里是返回的内容：

<input value = "20">

然后我尝试通过这样做来改变输入框的值：

input.value = 3;

然后当我在控制台中输入“input”时，它告诉我该值仍为20。

<input value = "20">

所以我的问题是，如何让它返回3的值给我？

Answer 1

尝试以下方式：

var el = document.getElementsByTagName('input');
el[0].setAttribute('value', '3');
console.log(document.getElementsByTagName('input')[0])

<input value = "20">

Answer 2

然后当我在控制台中输入“input”时，它告诉我该值仍为20。
<input value = "20">

这是一个常见的混淆点。

控制台显示的value 属性与输入的当前值不同。这是输入的默认值。当前值根本不保留在属性中。

您通过分配到value成功设置了输入当前值。如果您想更改其value 属性，则可以通过分配到其defaultValue媒体资源或使用setAttribute进行更改。

input.defaultValue = 3;
// or
input.setAttribute("value", 3);

...假设（从您的问题中看出），input是对相关输入的引用。

Answer 3

基于有关调度事件的讨论。

＆＃13;

const inputEl = document.querySelector('input')
const btn = document.querySelector('button')
const event = new Event('change')

btn.addEventListener('click', () => {
  inputEl.setAttribute('value', Math.random())
  inputEl.dispatchEvent(event)
})

inputEl.addEventListener('change', () => console.log(inputEl))

＆＃13;

<input value="20">
<button>Add</button>

＆＃13;

Answer 4

您可以这样做：

在您的HTML中，为您的输入提供ID

<input id="input1" value = "20">

然后在你的JS中：

document.getElementById("input1").value = 3;

用JS改变输入框的值

4 个答案: