How to connect a id to a trigger function in html and javascript

Question

With the code below, I am trying to make it responsive to the input of mute and muteon. So that when mute or muteon is input in the textbox it will change the color to red for muteon and green for mute, of a linked id in this case id="text" and "text1". Thanks!

HTML:

  <!DOCTYPE html>
    <html>
    <body>

    <p>Write something in the text field to trigger a function.</p>

    <input type="text" id="myInput" oninput="myFunction()">

    <p id="demo"></p>

    <script>
    function myFunction() {
      var x = document.getElementById("myInput").value;
      document.getElementById("demo").innerHTML = "You wrote: " + x;
    }
    </script>

    </body>
    </html>

Wanted linked HTML:

<h1 class="l1-txt1 txt-center p-t-0 p-b-10">
    <p id="text1" style="color:white; font-weight: 600"></p>
</h1>

<h1 class="l1-txt1 txt-center p-t-0 p-b-60">
    <p id="text" style="color:crimson; font-weight: 600"></p>
</h1>

Answer 1

You can try the following way:

 function myFunction() { var x = document.getElementById("myInput").value; var t1 = document.getElementById("text1"); var t2 = document.getElementById("text"); document.getElementById("demo").innerHTML = "You wrote: " + x; if(x.trim().toLowerCase() == 'mute'){ t1.style.color = 'green'; t2.style.color = 'green'; } else if(x.trim().toLowerCase() == 'muteon'){ t1.style.color = 'red'; t2.style.color = 'red'; } }

 <p>Write something in the text field to trigger a function.</p> <input type="text" id="myInput" oninput="myFunction()"> <p id="demo"></p> <h1 class="l1-txt1 txt-center pt-0 pb-10"> <p id="text1" style="color:white; font-weight: 600">Text 1</p> </h1> <h1 class="l1-txt1 txt-center pt-0 pb-60"> <p id="text" style="color:crimson; font-weight: 600">Text</p> </h1>

How to connect a id to a trigger function in html and javascript

Question

1 answers

solution1
2 ACCPTED 2020-04-22 18:44:10

How to connect a id to a trigger function in html and javascript

Question

1 answers

solution1 2 ACCPTED 2020-04-22 18:44:10

solution1
2 ACCPTED 2020-04-22 18:44:10