动态创建新元素

debugcn 发表于 Dev

中国

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

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

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>

用户11575567

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

删除评论

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。