Trying to increment numbers by a given value

Question

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>

Can you provide some examples of expected inputs and outputs? — esqew, Mar 19 '19 at 20:13
Please add the `xStart` and `xIncr` elements to the snippet so we can reproduce your issue. Also, don't use `.getElementsByClassName()`...ever. [See this](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474) for why. Lastly, don't use `.innerHTML` when the string involved doesn't contain any HTML. `.innerHTML` has security and performance implications. Use `.textContent` instead. — Scott Marcus, Mar 19 '19 at 20:13
Any inputs should work, and the code should output the given value to increment added onto the previous value down the line e.g. 2, 4, 6, 8 or 3, 6, 9, 12. Do want to see the HTML for the inputs? — The Nuthouse, Mar 19 '19 at 20:14
Yes, as I said, please update the snippet to include those so we can replicate your issue. — Scott Marcus, Mar 19 '19 at 20:15
@ScottMarcus Okay, so ill fix that up right now, is there any time I should use `.innerHTML`? — The Nuthouse, Mar 19 '19 at 20:16
Only when the string you are working with is completely under your control and contains HTML that needs to be parsed. — Scott Marcus, Mar 19 '19 at 20:17
Okay, thanks, and I added the inputs, don't worry about the yStart and yIncr those don't matter. — The Nuthouse, Mar 19 '19 at 20:20

Maheer Ali · Accepted Answer · 2019-03-19T20:35:09.300

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>

It's starting from one on purpose because the first is changed manually, then every number after the first needs to add the `xInc.value` on to the previous number — The Nuthouse, Mar 19 '19 at 20:33
@The Nuthouse You want it to start from `1`. See the snippet I just fixed it> — Maheer Ali, Mar 19 '19 at 20:35

Trying to increment numbers by a given value

1 Answers1