如何添加多个文本框来替换页面上的文本
我在使用 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回答
-
元芳怎么了
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> -
尚方宝剑之说
您可以将两个参数传递给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>
随时随地看视频慕课网APP
相关分类
JavaScript