创建动态新元素

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (6)

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

下拉选项仅适用于更改颜色的第一个类,但其余部分不起作用。我该如何解决?

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>

删除评论

用户回答回答于

在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”.-

所属标签

可能回答问题的人

  • 西风

    renzha.net · 站长 (已认证)

    9 粉丝1 提问5 回答
  • uncle_light

    5 粉丝518 提问3 回答
  • 学生

    2 粉丝477 提问3 回答
  • 军哥

    重庆雷驰信息技术有限公司 · 经理 (已认证)

    5 粉丝1 提问3 回答

扫码关注云+社区

领取腾讯云代金券