Question

如果它们具有ID，我知道如何使用javascript更改文本输入值，但是如果它们没有ID怎么办？我需要查找并更改页面上第一个和第二个文本输入的值。我该怎么做？

<input type="text" id="text" value="no value">

<button onclick="myFunction()">Change Values</button>

function myFunction() {
document.getElementById("text").value = "Text is now changed";
}

如果他们没有ID，我需要知道如何更改页面上第一和第二输入文本的值。例如，将“无值1”更改为“是值1”，将“无值2”更改为“是值2”。我该怎么办？

<input type="text" value="no value 1">
<input type="text" value="no value 2">

Answer 1

如果我正确理解了您的问题，那么使用document.getElementsByTagName是一个答案。

const inputElements = document.getElementsByTagName('input');
inputElements[0].value = "insert input 1";
inputElements[1].value = "insert input 2";

检查此jsfiddle（https://jsfiddle.net/hentleman/09tr7bku/1/）

Answer 2

老派，但仍然有效：

function changeEm() {
document.forms[0][0].value = "yes value 1";
document.forms[0][1].value = "yes value 2";
}

<body onload=changeEm()>
<form>
<input type="text" value="no value 1">
<input type="text" value="no value 2">
</form>
</body>

Answer 3

文档元素查询方法很多，其中一种是document.getElementsByTagName。

此方法返回HTMLCollection，它是HTML对象的可迭代对象。

有了这些知识，假设您具有以下HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Get Inputs</title>
</head>
<body>
  <input type="text" value="First" />
  <input type="text" value="Second" />
</body>
</html>

您可以使用input的{{1}}来获取HTML中的所有document元素，如下所示：

getElementsByTagName

const inputEls = document.getElementsByTagName("input");将包含inputEls中的HTMLCollection，现在我们可以迭代集合并对其进行处理。

最终的JavaScript必须如下所示：

HTMLInputElement

没有ID时更改第一和第二文本输入值

3 个答案: