javascript - 动态创建新元素

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

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

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>

最佳答案

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

删除评论