Dabbous Dabbous - 1 year ago 101
Javascript Question

Input integer accumulating in loop

Im trying to create a loop where the loop's limit is pulled out from the input "Enter # of Circles". It is currently accumulating values based on changes in the input.

Is there any way to just pull only the last value from the input to create a loop of divs?

Thanks Alot!

<!DOCTYPE html>
<title>Intro Webpage!</title>
div {
width: 120px;
height: 120px;
display: inline-block;
margin-left: 1px;
<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>
<b>Enter # of Circles<b>
<input type="integer" id="circles">
<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" />
<input type="integer" id="Color">
//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 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);
ContestantNum.addEventListener('keydown', function(e) {
if(timer) {
timer = setTimeout(function() {
}, 800);

Answer Source

First of all you are creating many circles with the same ID. ID in HTML is to be unique on the whole page. If you create many circles with the same cir id then when you do


You're gonna get only 1 element with id cir (you can see the elemenT instead of elemenTS in the method name).

Same thing about color ID, you create more than 1 of them. Use class keyword instead and then instead of


use something like


You can give them names like cir1, cir2 etc and color1, color2 correspondingly and then get them number from input ID and find a circle with the same number.