我在使用 HTML 的页面上有以下文本：“你好，我叫 HuggyBiscuit”我希望能够添加框，例如更改“我的”和“Huggybiscuit”我可以使用以下代码更改其中的 1 个（例如 HuggyBiscuit）<!DOCTYPE html><html><head></head><body> <script type="text/javascript"> function myFunction(input){ var elementValue = input.value; document.getElementById("test1").innerHTML = elementValue; } </script> <input id="name" name="name" onkeyup = myFunction(this) type="text" value="HuggBiscuit"> <br> Hello my name is <code id="test1">HuggBiscuit</code> </body></html>但是当我尝试添加第二个框时，它只是替换了第一个文本框的输入。我尝试为所有内容添加单独的 ID，但没有任何东西可以让我添加 2 个框来更改句子的单独部分。2个盒子不工作的例子：<!DOCTYPE html><html><head></head><body> <script type="text/javascript"> function myFunction(input){ var elementValue = input.value; document.getElementById("test1","test2").innerHTML = elementValue; } </script> <input id="name" name="name" onkeyup = myFunction(this) type="text" value="HuggBiscuit"> <input id="person" name="name" onkeyup = myFunction(this) type="text" value="my"> <br> Hello <code id="test2">my</code> name is <code id="test1">HuggBiscuit</code></body></html>
2 回答
元芳怎么了
TA贡献1798条经验 获得超7个赞
Get document.getElementById("test1","test2")，只返回一个元素。您可以通过 id 从调用函数中进行修改。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
function myFunction(input, id) {
var elementValue = input.value;
document.getElementById(id).innerHTML = elementValue;
}
</script>
<input id="name" name="name" onkeyup="myFunction(this,'text2')" type="text" value="HuggBiscuit">
<input id="person" name="name" onkeyup="myFunction(this, 'text1')" type="text" value="my">
<br>
Hello <code id="text1">my</code> name is <code id="text2">HuggBiscuit</code>
</body>
</html>
尚方宝剑之说
TA贡献1788条经验 获得超4个赞
您可以将两个参数传递给myFunction()
使用此技术，您可以定位单个文本字段。
使用document.querySelectorAll()您可以自动执行此过程，以便每个输入元素以一个具有相同参数（“名称”、“目标”等）的文本字段为目标
<body>
<script type="text/javascript">
function myFunction(input,field){
var elementValue = input.value;
document.getElementById(field).innerHTML = elementValue;
}
</script>
<input id="name" class="inputField" name="name" onkeyup = myFunction(this,'test1') type="text" value="HuggBiscuit">
<input id="person" class="inputField" name="name" onkeyup = myFunction(this,'test2') type="text" value="my">
<br>
Hello <code id="test2">my</code> name is <code id="test1">HuggBiscuit</code>
</body>
这是创建多个输入/文本字段连接的自动化方式的简单代码
<body>
<input id="name" class="inputField" name="test1" type="text" value="HuggBiscuit">
<input id="person" class="inputField" name="test2" type="text" value="my">
<input id="pet" class="inputField" name="test3" type="text" value="parrot">
<br>
Hello <code id="test2">my</code> name is <code id="test1">HuggBiscuit</code> and i have a(n) <code id="test3">parrot</code>
</body>
<script type="text/javascript">
document.querySelectorAll(".inputField")
.forEach(x=>x.addEventListener("keyup",(e)=>{document.getElementById(e.target.name).innerText = e.target.value}))
</script>
添加回答
举报
0/150
提交
取消