CODEWITHSUNDEEP
javascripthtmlarrays
The Nuthouse
The Nuthouse

Reputation: 173

Trying to increment numbers by a given value

I have a line of numbers from 1 to 10. I want to be able to select the starting number for the line, which would change the value of 1 to whatever the user entered. And then I want to be able to increment every number after the first number by whichever number the user chooses. For example if the user chooses starting number of 10 and increment of 5 the line will look like this: 10, 15, 20, 25, 35... etc. I'm almost there but I can't figure out what's wrong, after the first number it increments the numbers but starting at the value entered instead of adding onto the previous value. In short I want it to add the increment value on to the previous number in the array and replace its value with that, again, 5, 10, 15, 20, until the array ends. Sorry if the HTML looks awful it glitched when I pasted it.

let xSt = document.getElementById("xStart");
let xInc = document.getElementById("xIncr");
let xs = document.getElementsByClassName("xs");

//changes first number to entered value in the text box
xSt.addEventListener("keydown", function(ev){
	if(ev.keyCode == 13){  
		xs[0].innerHTML = xSt.value;
	};
});

//supposed to add the entered value to the previous value each time
xInc.addEventListener("keydown",function(ev){
	if(ev.keyCode == 13){
		let lp = 1;
		xs[9].innerHTML = xInc.value * 10;
		for (let i=1; i < xs.length; i++){		
			xs[i].innerHTML = xInc.value * lp++;
		};
	};
});
<div id="x1" class="xs">1</div>
<div id="x2" class="xs">2</div>
<div id="x3" class="xs">3</div>
<div id="x4" class="xs">4</div>
<div id="x5" class="xs">5</div>
<div id="x6" class="xs">6</div>
<div id="x7" class="xs">7</div>
<div id="x8" class="xs">8</div>
<div id="x9" class="xs">9</div>
<div id="x10" class="xs">10</div>
<table>
	<tr>
	<td>
	<div id="Manual">Manual Graph Values</div>
	</td>
	</tr>
	<tr>
	<td>
	<input id="xStart" type="text" placeholder="Number where X starts">
	<input id="yStart" type="text" placeholder="Number where Y starts">
	</td>
	</tr>
	<tr>
	<td>
	<input id="xIncr" type="text" placeholder="How much X increments">
    <input id="yIncr" type="text" placeholder="How much Y increments">
	</td>
	</tr>
	</table>

Upvotes: 0

Views: 286

Answers (1)

Maheer Ali
Maheer Ali

Reputation: 36564

You need to start loop from 0 but you are starting from 1 so it doesnot change the first. Also you have i increasing in each loop so you don't need lp. 

let start = +xSt.value
for (let i=0; i < xs.length; i++){      
    xs[i].innerHTML = start + xInc.value * i;
}

I have change the second eventListener 

let xSt = document.getElementById("xStart");
let xInc = document.getElementById("xIncr");
let xs = document.getElementsByClassName("xs");

//changes first number to entered value in the text box
xSt.addEventListener("keydown", function(ev){
	if(ev.keyCode == 13){  
		xs[0].innerHTML = xSt.value;
	};
});

//supposed to add the entered value to the previous value each time
xInc.addEventListener("keydown",function(ev){
	if(ev.keyCode == 13){
		let start = +xSt.value
        for (let i=0; i < xs.length; i++){      
           xs[i].innerHTML = start + xInc.value * i;
        }
	};
});
<div id="x1" class="xs">1</div>
<div id="x2" class="xs">2</div>
<div id="x3" class="xs">3</div>
<div id="x4" class="xs">4</div>
<div id="x5" class="xs">5</div>
<div id="x6" class="xs">6</div>
<div id="x7" class="xs">7</div>
<div id="x8" class="xs">8</div>
<div id="x9" class="xs">9</div>
<div id="x10" class="xs">10</div>
<table>
    <tr><td><div id="Manual">Manual Graph Values</div></td></tr>
    <tr><td><input id="xStart" type="text" placeholder="Number where X starts"><input id="yStart" type="text" placeholder="Number where Y starts"></td></tr>
    <tr><td><input id="xIncr" type="text" placeholder="How much X increments"><input id="yIncr" type="text" placeholder="How much Y increments"></td></tr>
 </table>

Upvotes: 2

Related Questions