Integer-Eingang in Schleife

-1

Im Versuch, eine Schleife zu erstellen, bei der das Limit des Loops aus dem Eingang herausgezogen wird "Enter # of Circles". Es akkumuliert derzeit Werte basierend auf Änderungen in der Eingabe.Integer-Eingang in Schleife

Gibt es eine Möglichkeit, nur nur den letzten Wert aus der Eingabe ziehen, um eine Schleife von divs zu erstellen?

Vielen Dank!

<!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> 
 
      <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) { 
 
       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); 
 
      }); 
 
     </script> 
 
    </body> 
 
    </html>

Quelle

2016-06-14 Dabbous

Was meinen Sie mit dem letzten Wert der Eingabe? Kannst du ein paar Beispiele geben? –

Der letzte Wert, der in das Eingabefeld # Anzahl der Kreise eingeben eingegeben wurde. Also lassen Sie sagen, dass Sie 5 eingeben, erstellt es 5 zusätzliche Kreise, und wenn dann die Zahl 5 mit 3 überschreiben, würde es die 5 durch 3 ersetzen. Wenn das nicht klar war, bitte informieren Sie mich. Vielen Dank! – Dabbous

Dies liegt daran, dass Sie an die bestehenden Kreise anhängen, räumen Sie nicht und diejenigen entfernen, die vorhanden sind, wenn Sie mehr erstellen. Es hängt also mehr von dem ab, was existiert. Was Sie tun müssen, ist es, die Elemente entfernen (wobei in diesem Fall die Kinder in form), bevor sie aus dem Eingang zu schaffen:

bearbeiten

Wie @Azamantes wies darauf hin, es doppelte IDs für: #Participentfieldwrap, #Color und #cir. Ich habe den Code aktualisiert, so dass er neue IDs mit den Namen Participentfieldwrap_i, Color_i und cir_i zuweist, wobei i von 0..n-1 pro Kreis geht. Hier

function createCircles(val) { 
    // Removing previous circles 
    while (form.firstChild) { 
     form.removeChild(form.firstChild); 
    } 
    for(i = 0; i < val; i++) { 
     var clone = participantsField.cloneNode(true); 
     // Assigning new ids 
     clone.id = "Participentfieldwrap_" + i; 
     clone.querySelector("input").id = "Color_" + i; 
     clone.querySelector("circle").id = "cir_" + i; 
     form.appendChild(clone); 
    } 
    ...

ist ein Snippet:

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

Quelle

2016-06-14 12:37:26

Vielen Dank! Ich habe versucht, es funktioniert zu bekommen, aber die Objekt-IDs werden nicht aus der Div-ID herausgezogen. – Dabbous

allererst Sie viele Kreise mit dem gleichen ID erstellen. ID in HTML soll einmalig auf der ganzen Seite sein. Wenn Sie dann viele Kreise mit der gleichen cir ID erstellen, wenn Sie

document.getElementById('cir');

tun, du wird bekommen nur 1 Element mit id cir (können Sie die elemenT statt elemenTS in dem Methodennamen sehen).

Gleiches über color ID, Sie erstellen mehr als 1 von ihnen. Verwenden Sie class Stichwort statt und dann statt

document.getElementByID()

Verwendung so etwas wie

document.getElementsByClassName('Color');

Sie geben ihnen ids wie cir1, cir2 etc und color1, color2 entsprechend und sie dann erhalten Zahl von Eingangs ID und finden ein Kreis mit der gleichen Nummer.

Quelle

2016-06-14 12:38:39 Azamantes

Das ist definitiv! Wissen Sie, wie Sie es unter dem von Spencer Wieczorek bereitgestellten Skript anwenden? – Dabbous

@Dabbous Ich habe meine Antwort aktualisiert, um dafür zu danken, dass Azamantes erwähnt wurde. –

Integer-Eingang in Schleife

Antwort

Verwandte Themen