Create new elements dynamically

Question

I am trying to create new elements with name and time. I want to let the user customize them(ex. can be able to change color).

The dropdown option is only working for the first class it changes the color but the rest of them are not working. How can I fix it?

 function f_color() { var x = document.getElementById('Tcolor1').value; window.alert(x); if (x == 0) { document.getElementById('input1').style.color = "black"; document.getElementById('input2').style.color = "black"; document.getElementById('input3').style.color = "black"; } if (document.getElementById('Tcolor').value == 1) { document.getElementById('input1').style.color = "red"; document.getElementById('input2').style.color = "red"; document.getElementById('input3').style.color = "red"; } if (document.getElementById('Tcolor').value == 2) { document.getElementById('input1').style.color = "blue"; document.getElementById('input2').style.color = "blue"; document.getElementById('input3').style.color = "blue"; } }

 <button id="btn2">Add Another Class</button> <form> <select class="form-control" id="Tcolor" name="Tcolor" style="color:black; font-size: 20px; " onchange="f_color()"> <option value=0>black </option> <option value=1>red</option> <option value=2>blue </option> </select> </form> <form> <input id="input1" name="className"><br> <input id="input2" name="classTime"><br> <input id="input3" name="classNote"><br> </form>

Answer 1

 <button id="btn2">Add Another Class</button> <form> <select class="form-control" id="Tcolor" name = "Tcolor" style="color:black; font-size: 20px; " onchange="f_color()" > <option value=0 >black </option> <option value=1 >red</option> <option value=2 >blue </option> </select > </form> <form> <input id="input1" name="className" ><br> <input id="input2" name="classTime" ><br> <input id="input3" name="classNote" ><br> </form> <script> function f_color(){ var x=document.getElementById('Tcolor1').value; window.alert(x); if ( x == 0) { document.getElementById('input1').style.color = "black"; document.getElementById('input2').style.color = "black"; document.getElementById('input3').style.color = "black"; } if (document.getElementById('Tcolor').value == 1 ) { document.getElementById('input1').style.color = "red"; document.getElementById('input2').style.color = "red"; document.getElementById('input3').style.color = "red"; } if (document.getElementById('Tcolor').value == 2) { document.getElementById('input1').style.color = "blue"; document.getElementById('input2').style.color = "blue"; document.getElementById('input3').style.color = "blue"; } } </script>

remove comment

Answer 2

In JavaScript, <!-- --> is not a valid comment tag. Also, in f_color , you are using the variable x only once. You should replace your other comparisons with x as well. Prefer CSS classes over the style attribute.

Applying all these changes (and a few other miscellaneous changes):

 // do it in javascript document.querySelector(".form-control").onchange = f_color; function f_color(e) { // e has the calling element in it let /*var can be used too*/ x = parseInt(e.target.value, 10); let input1 = document.getElementById("input1"); let input2 = document.getElementById("input2"); let input3 = document.getElementById("input3"); alert(x); let color = ""; if (x === 0) { color = "black"; } else if (x === 1) { color = "red"; } else if (x === 2) { color = "blue"; } alert(color); input1.style.color = color; input2.style.color = color; input3.style.color = color; }

 .form-control { color: black; font-size: 20px; }

 <button id="btn2">Add Another Class</button> <ol> <form> <select class="form-control" name="Tcolor"> <option value="0">black</option> <option value="1">red</option> <option value="2">blue</option> </select> </form> <form> <input id="input1" name="className"><br> <input id="input2" name="classTime"><br> <input id="input3" name="classNote"><br> </form> </ol>

---

But really, the problem is the mis-spelling of "Tcolor" in

var x = document.getElementById('Tcolor1').value;

It should be "Tcolor".-

Answer 3

 function f_color() { var x = document.getElementById('Tcolor1').value; window.alert(x); if (x == 0) { document.getElementById('input1').style.color = "black"; document.getElementById('input2').style.color = "black"; document.getElementById('input3').style.color = "black"; } if (document.getElementById('Tcolor').value == 1) { document.getElementById('input1').style.color = "red"; document.getElementById('input2').style.color = "red"; document.getElementById('input3').style.color = "red"; } if (document.getElementById('Tcolor').value == 2) { document.getElementById('input1').style.color = "blue"; document.getElementById('input2').style.color = "blue"; document.getElementById('input3').style.color = "blue"; } }

 <button id="btn2">Add Another Class</button> <form> <select class="form-control" id="Tcolor" name="Tcolor" style="color:black; font-size: 20px; " onchange="f_color()"> <option value=0>black </option> <option value=1>red</option> <option value=2>blue </option> </select> </form> <form> <input id="input1" name="className"><br> <input id="input2" name="classTime"><br> <input id="input3" name="classNote"><br> </form>