Question

Is there a way to loop a declaration of a variable? just a loop to help me declare the variables so i dont have to do the monotonous work of change the numbers of the variable

	var height1 = document.getElementById('height1').value;
	var height2 = document.getElementById('height2').value;
	var height3 = document.getElementById('height3').value;
	var height4 = document.getElementById('height4').value;
	var height5 = document.getElementById('height5').value;
	var height6 = document.getElementById('height6').value;
	var height7 = document.getElementById('height7').value;
	var height8 = document.getElementById('height8').value;
	var height9 = document.getElementById('height9').value;
	var height10 = document.getElementById('height10').value;
	var height11 = document.getElementById('height11').value;
	var height12 = document.getElementById('height12').value;
	var height13 = document.getElementById('height13').value;
	var height14 = document.getElementById('height14').value;
	var height15 = document.getElementById('height15').value;
	var height16 = document.getElementById('height16').value;

Answer 1

This is not a right way of coding that, Just do like,

var heights = [];
Array.from(document.querySelectorAll("input[id^=height]")).forEach(function(itm){
  heights.push(itm.value);
});

And now you can iterate the array heights to manipulate the values as per your requirement.

The logic behind the code is, querySelectorAll("input[id^=height]") will select the input elements that has id starts with the text height. Since the return value of querySelectorAll is a nodelist, we have to convert it as an array before using array functions over it. So we are using Array.from(nodelist). That will yield an array for us. After that we are iterating over the returned array by using forEach and pushing all element's value into the array heights.

Answer 2

This is almost always an indication that you want an array. Something like this:

var heights = [];
for (var i = 1; i <= 16; i++) {
    heights.push(document.getElementById('height' + i).value);
}

Then you can reference a value from the array with something like:

heights[1]

Though technically since in JavaScript your window-level variables are indexable properties of the window object, you can essentially do the same thing with variable names themselves:

for (var i = 1; i <= 16; i++) {
    window['height' + i] = document.getElementById('height' + i).value;
}

Then you can still use your original variables:

height1

Though in the interest of keeping things outside of window/global scope, maintaining the array seems a bit cleaner (and semantically more sensible).

Answer 3

This seems to be a good use case for an object:

var heights = {};

for (var i = 1; i <= 16; i++) {
  heights[i] = document.getElementById('height' + i).value;
}

Answer 4

Normally you would put them in an array.

var  heights = []
for (i = 1; i < 17; i++) { 
  heights[i] = document.getElementById('height' + i).value;;
}

Beware this will give you a hole at the start of the array ie heights[0] has nothing in it. If you use this to iterate it won't matter...

for (var i in heights) {
  alert(heights[i]);
}

Answer 5

Maybe its time to introduce function:

Generally speaking, a function is a "subprogram" that can be called by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the function body. Values can be passed to a function, and the function will return a value.

function getHeight(id) {
    return document.getElementById(id).value;
}

Call with the wanted id and use it like a variable.

getHeight('height1')

Is there a way to loop this?

5 个答案: