Как подключить идентификатор к триггерной функции в html и javascript - PullRequest
Новая
       20

Как подключить идентификатор к триггерной функции в html и javascript

0 голосов
/ 22 апреля 2020

С кодом ниже, я пытаюсь сделать его отзывчивым на ввод mute и muteon. Таким образом, когда в текстовое поле вводится отключение звука или отключение звука, он меняет цвет на красный для отключения звука и зеленый для отключения звука, связанного идентификатора в этом случае id = "text" и "text1". Спасибо!

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>

Ищу ссылку 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>

1 Ответ

2 голосов
/ 22 апреля 2020

Вы можете попробовать следующий способ: 

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