如何使用 DOM 更新 html 输入字段？答案

【问题标题】：How to update an html input field using the DOM?如何使用 DOM 更新 html 输入字段？
【发布时间】：2018-11-24 14:33:53
【问题描述】：

如何使用 DOM 更新 html 输入字段？这是我使用 getElementsByClassName 方法尝试过的：

<input type="number" class="price_input price_input_now" placeholder="Price in USD">

<script>
function myFunction() {

    document.getElementsByClassName("price_input price_input_now").setAttribute = "Some text";

    console.log("btn clicked");
}
</script>

点击

函数被调用 - console.log("btn clicked") 正在工作。到目前为止，我尝试了 .innerHTML、.innerText 和 .setAttribute。

谢谢！！

【问题讨论】：

Getelementsbyclassname 为您提供匹配元素的数组。其次，您可以使用 'value' 访问 HTML 值属性。
我看到这里真正的问题是类型不匹配。您不能将 input type="number" 设置为某些文本。您是否要更改占位符？如果是这种情况，那么使用 Nandita 的解决方案，也许用 getElementById 替换

标签： javascript

【解决方案1】：

属性是与标签关联的值，例如锚标签，它实际上是<a>，但具有属性href=。您正在寻找的是价值。

在这种情况下，如果输入有 id，您的代码会简单得多。

我在这种情况下看到的是你有一个数字输入。您不能将数字输入设置为文本。

<input type="number" id="price_input" class="price_input price_input_now" placeholder="Price in USD">

例如：

document.getElementById("price_input").value = 100;

片段：

  function myFunction() {

    document.getElementById("price_input").value = 100;
    console.log("btn clicked");
  }

<input type="number" id="price_input" class="price_input price_input_now" placeholder="Price in USD">
<button onclick="myFunction()">button</button>

如果你想改变占位符文本，它只是一个覆盖而不是真正的值，那么你可以设置占位符，它是输入标签的一个属性。

document.getElementById("price_input").setAttribute("placeholder", "Some text");

【讨论】：

【解决方案2】：

您需要更改占位符属性，如下所示：

document.getElementsByClassName("price_input price_input_now")[0].setAttribute("placeholder", "Some text");

同样document.getElementsByClassName 返回一个元素数组，因此您需要从该数组中选择一个索引。

<input type="number" class="price_input price_input_now" placeholder="Price in USD">
<button onclick="myFunction()">button</button>
<script>
  function myFunction() {

    document.getElementsByClassName("price_input price_input_now")[0].setAttribute("placeholder", "Some text");

    console.log("btn clicked");
  }
</script>

【讨论】：

【解决方案3】：

我想请您注意以下几点：

您正在使用输入type="number"，这意味着输入只会接受数字，而不是字符串（例如纯文本），因此在您的示例中，不允许将“某些文本”设置为输入 type="number"。
getElementsByClassName 方法返回 collection 元素，而不是单个元素。由于它是集合，因此您可以通过 index 属性访问特定元素。
输入有一个属性value，你可以用你的价值。

总的来说，下面的代码应该做的事情：

document.getElementsByClassName("price_input price_input_now")[0].value = 5;

（请注意，我访问了集合的 [0] 元素，getElementsByClassName 返回）。

如果您想将 "Some text" 值放入您的输入中，您需要将输入类型更改为 text。

【讨论】：