javascript - 如何使用 DOM 更新 html 输入字段？

Question

如何使用 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。

谢谢!!

Answer 1

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

在这种情况下，如果输入有 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");