Question

第一个输入创建一个名为Enter＃of Circles的循环，创建多个div。每个div包含一个圆和一个输入对象。

输入颜色应该使用从divID中拉出的ID来更改同一div中圆圈的颜色。

ID被拉出循环，但由于事件监听器似乎无法正常工作，但似乎无法正常工作。

有关做错的任何线索？

 <!DOCTYPE html>
<head>
   <title>Bins Status</title>
   <style>
      div {
      width: 120px;
      height: 120px;
      display: inline-block;
      margin-left: 1px;
      }
   </style>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; target-densitydpi=device-dpi" />
   <link rel="stylesheet" type="text/css" href="style.css"/>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">     </script>
   <script type="text/javascript" src="script.js"></script>
</head>
<body>
   <br>
   <b>Enter # of Circles<b>
   <br>
   <input type="integer" id="circles">   
   </b></b>
   <form>
      <div id="Participentfieldwrap">
         <svg height="100" width="200">
            <line x1="0" y1="50" x2="100000000" y2="10000" style="stroke:rgb(0,255,0);stroke-width:5" />
            <svg height="100" width="100">
               <circle id="cir" cx="50" cy="50" r="30" stroke="black" stroke-width="3" />
            </svg>
         </svg>
         <br>
         <b>Color<b>
         <br>
         <input type="integer" id="Color">
         </b></b>

         <script>
            //Inputing integer 1, 2 or 3 which instantly applies color formatting (RGB) to circle in the same div
            var cir = document.getElementById("cir");
            var into = document.getElementById("Color");
            into.addEventListener("keyup", myFunction, false);

            function myFunction() {
                if(document.getElementById("Color").value == 1)
                    cir.style.fill = "green";
                else if(document.getElementById("Color").value == 2)
                    cir.style.fill = "red";
                else if(document.getElementById("Color").value == 3)
                    cir.style.fill = "blue";
                else cir.style.fill = "Yellow";
            }
         </script>
      </div>
   </form>


   <script type="text/javascript">
      //Loop for creating multiple divs in a form using a limit that is set in an integer input

      var participantsField = document.getElementById("Participentfieldwrap"),
          form = document.getElementsByTagName("form")[0],
          ContestantNum = document.getElementById("circles"),
          i, timer;

      function createCircles(val) {
          // Removing previous circles
          while (form.firstChild) {
              form.removeChild(form.firstChild);
          }
          for(i = 0; i < val; i++) {
              var clone = participantsField.cloneNode(true);
              clone.id = "Participentfieldwrap_" + i;
              clone.querySelector("input").id = "Color_" + i;
              clone.querySelector("circle").id = "cir_" + i;
              form.appendChild(clone);
          }
      }
      ContestantNum.addEventListener('keydown', function(e) {
          if(timer) {
              clearTimeout(timer);
          }
          timer = setTimeout(function() {
              createCircles(ContestantNum.value);
          }, 800);
      });
   </script>
</body>
</html>

https://fiddle.jshell.net/o96y7bf2/

Answer 1

问题是你的函数调用id＆＃34; cir＆＃34;和＆＃34;颜色＆＃34;当你创建圈子时，id是＆＃34; cir_0＆＃34;和＆＃34; color_0＆＃34;。另一个问题是DOM中的新元素不会激活页面加载时启动的功能。

我不知道如何使用纯JavaScript进行此操作，但here我使用jquery留下了解决方案。

来自墨西哥的问候。

div中的对象使用div ID动态连接

1 个答案: