0

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>
StackGuru
  • 133
  • 7

1 Answers1

2

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 p-t-0 p-b-10">
  <p id="text1" style="color:white; font-weight: 600">Text 1</p>
</h1>

<h1 class="l1-txt1 txt-center p-t-0 p-b-60">
  <p id="text" style="color:crimson; font-weight: 600">Text</p>
</h1>
Mamun
  • 66,969
  • 9
  • 47
  • 59
  • 1
    This is exactly what I wanted. I am going to play around with it and will let you know if I have any questions. Thank you! – StackGuru Apr 22 '20 at 18:47
  • how would I have the textbox filled by input coming from and outside source or in my case I would like the textbox to be filled remotely through telnet. Do you know how I might accomplish this – StackGuru Apr 27 '20 at 13:42
  • 1
    @StackGuru, I don't have any experience in telnet. You can ask a new question specifying your requirement, there might be some one who can help you:) – Mamun Apr 27 '20 at 14:22