尝试将数字增加给定值

时间:2019-03-19 20:09:03

标签: javascript html arrays

我有一行从1到10的数字。我希望能够选择该行的起始数字,这会将1的值更改为用户输入的任何数字。然后,我希望能够将第一个数字之后的每个数字递增用户选择的那个数字。例如,如果用户选择起始编号为10且增量为5,则该行将如下所示:10、15、20、25、35 ...等。我快到了,但是我不知道出了什么问题,在第一个数字之后,它将递增数字,但从输入的值开始,而不是添加到先前的值。简而言之,我希望它将增量值添加到数组中的前一个数字上,并用5、10、15、20再次替换它的值,直到数组结束。抱歉,如果HTML看上去很糟糕,则在我粘贴时会出现故障。

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>

1 个答案:

答案 0 :(得分:2)

您需要从0开始循环,但是您要从1开始,因此它不会更改第一个循环。另外,每个循环中都有i个增长点,因此您不需要lp

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

我更改了第二个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>