如何添加多个文本框来替换页面上的文本

问题描述 投票:0回答:1

我在使用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>
javascript input text replace output
1个回答
0
投票

获取document.getElementById(“ test1”,“ test2”),仅返回一个元素。请改用课堂或输入两次。

<!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>
© www.soinside.com 2019 - 2024. All rights reserved.