動態創建新元素

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>