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

属性是与标记关联的值，例如，锚标记实际为<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");

Answer 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>

Answer 3

我想提请你注意以下事项：

您正在使用输入type="number"，这意味着只会输入接受数字，而不是字符串（例如纯文本），因此在您的示例中＆＃34;有些文字＆＃34;不允许设置为输入type="number"。
getElementsByClassName方法返回元素的集合，而不是单个元素。从它的集合开始，您将通过索引属性访问特定元素。
输入有一个属性value，你可以覆盖你的属性值。

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

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

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

如果您想将＆＃34;某些文字＆＃34; 值添加到您的输入中，则需要将输入类型更改为text。

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

3 个答案: