【问题标题】：How can I add multiple text boxes to replace text on the page如何添加多个文本框来替换页面上的文本
【发布时间】：2020-07-13 03:20:03
【问题描述】：

我在使用 HTML 的页面上有以下文本：

“你好，我叫 HuggyBiscuit”

我希望能够添加框，例如更改“my”和“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 个框来更改句子的单独部分。

两个盒子不工作的例子：

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

【问题讨论】：

标签： javascript input text replace output

【解决方案1】：

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>

【讨论】：

【解决方案2】：

您可以将两个参数传递给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>

【讨论】：