CODEWITHSUNDEEP
javascriptinputtextreplaceoutput
HuggyBiscuit
HuggyBiscuit

Reputation: 3

How can I add multiple text boxes to replace text on the page

I have the below text on a page using HTML:

"Hello my name is HuggyBiscuit"

I'd like to be able to add boxes for example to change "my" and "Huggybiscuit"

I can change 1 of them (for example HuggyBiscuit) using the below code

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

But when I try and add in a second box, it simply replaces the first text box's input. I've tried adding separate IDs to everything but nothing allows me to add 2 boxes to change separate parts of the sentence.

Example of 2 boxes not working:

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

Upvotes: 0

Views: 233

Answers (2)

mgreif
mgreif

Reputation: 131

You could pass two parameters to myFunction()

Using this technique you can target a single textfield.

Using document.querySelectorAll() you can automate this process so each Input-Element targets one TextField having the same parameter ("name", "target", etc.)

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

Here is the simple code for the automated way of creating multiple Input-/ Text-Field connections

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

Upvotes: 0

xdeepakv
xdeepakv

Reputation: 8125

Get document.getElementById("test1","test2"), return only one element. You can pass id to modify from call function.

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

Upvotes: 2

Related Questions