Question

我正在尝试将第一个输入“Enter＃of Circles”设置为变量“ContestantNum”，没有提交按钮，这应该是循环中的限制（i = 0; i＆lt; = ContestantNum; i ++）

不确定是否有任何事件要在addEventListener（）中应用，它可以从输入中提取数据而不提交。

非常感谢！

    <!DOCTYPE html>

  <head>

    <title>Intro Webpage!</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>

//输入整数1,2或3，立即将颜色格式（RGB）应用于相同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">

//使用在整数输入中设置的限制

在表单中创建多个div的循环

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

    for(i=0; i<=ContestantNum; i++){
      var clone = participantsField.cloneNode(true);
      form.appendChild(clone);
    }
  </script>

    </body>
   </html>

Answer 1

何时需要循环启动，页面加载或输入何时更改？您可以将onkey up事件与输入绑定，这样您就可以访问事件处理程序中的输入值，然后可以设置ContestantNum var。

Answer 2

您需要进行keydown, keypress等事件，并进行去抖动：

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

function createCircles(val) {
  for (i = 0; i <= val; i++) {
    var clone = participantsField.cloneNode(true);
    form.appendChild(clone);
  }
}

ContestantNum.addEventListener('keydown', function(e){
   if(timer){ clearTimeout(timer); }

   timer = setTimeout(function(){
     createCircles(ContestantNum.value);
   }, 800);
});

没有提交按钮的整数输入可立即设置循环限制

2 个答案: