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

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

函数myFunction（）{
document.getElementsByClassName（“price\u input price\u input\u now”）.setAttribute=“Some text”；
console.log（“点击btn”）；
}

点击

正在调用该函数-console.log（“btn clicked”）正在工作。到目前为止，我尝试了.innerHTML、.innerText和.setAttribute

---

谢谢

属性是与标记关联的值，例如与锚定标记关联的值，锚定标记实际上是

，但具有属性

href=

。你所寻找的是价值

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

我在这个例子中看到的是，你有一个数字输入。不能将数字输入设置为文本

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

片段：

函数myFunction（）{
document.getElementById（“价格输入”）。值=100；
console.log（“点击btn”）；
}

按钮

属性是与标记关联的值，例如与锚定标记关联的值，锚定标记实际上是

，但具有属性

href=

。你所寻找的是价值

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

我在这个例子中看到的是，你有一个数字输入。不能将数字输入设置为文本

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

片段：

函数myFunction（）{
document.getElementById（“价格输入”）。值=100；
console.log（“点击btn”）；
}

按钮

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

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

另外

document.getElementsByClassName

返回一个元素数组，因此需要从该数组中选择索引

按钮
函数myFunction（）{
document.getElementsByClassName（“price_input price_input_now”）[0].setAttribute（“占位符”、“某些文本”）；
console.log（“点击btn”）；
}

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

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

另外

document.getElementsByClassName

返回一个元素数组，因此需要从该数组中选择索引

按钮
函数myFunction（）{
document.getElementsByClassName（“price_input price_input_now”）[0].setAttribute（“占位符”、“某些文本”）；
console.log（“点击btn”）；
}

我想让您注意以下事项：

• 您使用的是输入

  type=“number”

  ，这意味着输入只会 接受数字，而不是字符串（例如纯文本），因此在您的示例中，“某些文本”将不允许设置为输入

  type=“number”

• 方法返回元素的集合，而不是单个元素。由于它是一个集合，所以您可以通过索引属性访问特定的元素
• 输入有一个属性

  值

  ，您可以使用 价值观

总的来说，以下代码应该可以完成这项工作：

document.getElementsByClassName（“price\u input price\u input\u now”）[0]。值=5

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

如果您想在输入中输入“某些文本”值，则需要将输入类型更改为
text
我想让您注意以下事项：


您使用的是输入
type=“number”
，这意味着输入只会
接受数字，而不是字符串（例如纯文本），因此在您的示例中，“某些文本”将不允许设置为输入
type=“number”

方法返回元素的集合，而不是单个元素。由于它是一个集合，所以您可以通过索引属性访问特定的元素
输入有一个属性
值
，您可以使用
价值观

总的来说，以下代码应该可以完成这项工作：

document.getElementsByClassName（“price\u input price\u input\u now”）[0]。值=5

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

如果要将“Some text”值放入输入中，则需要将输入类型更改为
text
Getelementsbyclassname为您提供一个匹配元素数组。其次，您可以使用“value”访问HTML值属性。我发现这里真正的问题是类型不匹配。无法将输入类型=“number”设置为某些文本。您正在尝试更改占位符吗？如果是这种情况，那么使用Nandita的解决方案，也许通过替换GetElementByIDGetElementsByCassName可以为您提供一个匹配元素的数组。其次，您可以使用“value”访问HTML值属性。我发现这里真正的问题是类型不匹配。无法将输入类型=“number”设置为某些文本。您正在尝试更改占位符吗？如果是这种情况，那么使用Nandita的解决方案，也许可以替换getElementById