In the snippet below, I aim to create a responsive feature based on user input of 'mute' and 'muteon'. Whenever one of these is entered into the textbox, it will change the color of linked elements with the IDs "text" and "text1" to red for 'muteon' and green for 'mute'. Thank you!
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>
Desired HTML output:
<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>