Can I concat a string and a variable to select a DOM element in JavaScript? - Stack Overflow

admin管理员组

文章数量:1304098

I have tried Googling this question but no luck. Probably because I'm asking the wrong way. Any help is much appreciated.

I have variables copy1, copy2, etc. I want to iterate through them and select each one to check if it's contents has a certain number of characters. When I use any variation of the below, it will either console an error or output a string in the console.

var copy1 = document.getElementById('copy1');
var copy2 = document.getElementById('copy2');
var copy3 = document.getElementById('copy3');

for(var i=0;i<4;i++){
 console.log(copy+i);
 console.log("copy"+i);
};

Ideally I would be able to select an element and style that via javascript.

Much appreciated
Thanks All.
Moe

I have tried Googling this question but no luck. Probably because I'm asking the wrong way. Any help is much appreciated.

I have variables copy1, copy2, etc. I want to iterate through them and select each one to check if it's contents has a certain number of characters. When I use any variation of the below, it will either console an error or output a string in the console.

var copy1 = document.getElementById('copy1');
var copy2 = document.getElementById('copy2');
var copy3 = document.getElementById('copy3');

for(var i=0;i<4;i++){
 console.log(copy+i);
 console.log("copy"+i);
};

Ideally I would be able to select an element and style that via javascript.

Much appreciated
Thanks All.
Moe

• javascript

Share Improve this question Follow asked Jun 7, 2017 at 4:32 Moe-JoeMoe-Joe 1,03033 gold badges1515 silver badges2929 bronze badges 2

• 1 copy1 , copy2 are DOM nodes. What do you intend to do with the loop? – Sandeep Nayak Commented Jun 7, 2017 at 4:34
• 1 given the context of the code (i.e. none) window['copy'+i] may work – Jaromanda X Commented Jun 7, 2017 at 4:40

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Agree with @jaromanda-x:

var copy1 = document.getElementById('copy1');
var copy2 = document.getElementById('copy2');
var copy3 = document.getElementById('copy3');
for (var i=1; i<4; i++) {
   console.log(window['copy'+i]);
};

Or you can use more simple example, like:

for (var i=1; i<4; i++) {
    var name = 'copy' + i;
    console.log(document.getElementById(name));
};

Or even:

for (var i=1; i<4; i++) {
    console.log(document.getElementById('copy' + i));
};

You can store the properties in an object where values are set to the DOM element

let copies = {
 1 : document.getElementById('copy1'),
 2 : document.getElementById('copy2'),
 3 : document.getElementById('copy3')
}

for (let [key, prop] of Object.entries(copies)) {
  console.log(key, prop)
}

console.log(copies[1], copies[2], copies[3]);

Or use attribute begins with and attribute ends with selectors with .querySelector()

let n = 1;
let copy1 = document.querySelector(`[id^=copy][id$='${n}']`); // `#copy1`
let copy2 = document.querySelector(`[id^=copy][id$='${++n}']`); // `#copy2`

for (let i = 1; i < 4; i++) {
  console.log(document.querySelector("[id^=copy][id$=" + i + "]"));
}

Since nobody has addressed your "certain number of characters" requirement yet, I thought I would.

You could always use jQuery or write your own $ method, which works as a document.getElementById() wrapper function.

Here is a jsfiddle to see it in action.

HTML

<div id="copy1">01234</div>
<div id="copy2">012345678</div>
<div id="copy3">0123456789 0123456789</div>

JavaScript

// Isn't this just a brilliant short-cut?
function $(id) {
   return document.getElementById(id);
}

for (let i=1; i<4; i++){
   let obj = $('copy' + i);
   let value = (obj) ? obj.innerText : '';
   console.log('value.length:', value.length);
};

本文标签： Can I concat a string and a variable to select a DOM element in JavaScriptStack Overflow