动态创建新元素

Question

我正在尝试创建带有名称和时间的新元素。 我想让用户自定义它们（例如可以改变颜色）。

下拉选项仅适用于它改变颜色的第一类，但其余的都不起作用。 我该如何解决？

 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>

删除评论

Answer 2

在 JavaScript 中， <!-- -->不是有效的注释标签。 此外，在f_color ，您只使用了一次变量 x。 您也应该用x替换其他比较。 更喜欢 CSS 类而不是 style 属性。

应用所有这些更改（以及其他一些杂项更改）：

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

---

但实际上，问题在于“Tcolor”的拼写错误

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

应该是“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>