innerHTML добавление значения

166

27 июля 2018, 11:20

Есть 3 переменных. b1, b2, b3. Как вывести их значения в цикле, что бы буква a названия переменной была постоянной, а цифры изменялись.

b + i

Спасибо.

 let box1 = document.querySelector('#box1');
 let b1 = 'text 1';
 let b2 = 'text 2';
 let b3 = 'text 3';
 for (let i = 1; i <= 3; i++) {
  box1.appendChild(document.createElement('h3')).innerHTML = b + i;
 }

Answer 1

Можно использовать функцию eval()

let box1 = document.querySelector('#box1'); 
 
let b1 = 'text 1'; 
let b2 = 'text 2'; 
let b3 = 'text 3'; 
 
for (let i = 1; i <= 3; i++) { 
  box1.appendChild(document.createElement('h3')).innerHTML = eval('b' + i); 
}

<div id="box1"></div>

Но лучше использовать массивы

let box1 = document.querySelector('#box1'); 
 
let b = ['text 1', 'text 2', 'text 3']; 
 
for (let i = 0; i < b.length; i++) { 
  box1.appendChild(document.createElement('h3')).innerHTML = b[i]; 
}

<div id="box1"></div>

или объекты

let box1 = document.querySelector('#box1'); 
 
let obj = { 
  b1: 'text 1', 
  b2: 'text 2', 
  b3: 'text 3' 
}; 
 
for (let i = 1; i <= 3; i++) { 
  box1.appendChild(document.createElement('h3')).innerHTML = obj['b' + i]; 
}

<div id="box1"></div>

Answer 2

Как вариант, можно переменные с текстами поместить как свойства объекта (можно поместить их в массив и обращаться по индексам в массиве):

let box1 = document.querySelector('#box1'); 
 
let texts = { 
  b1: 'text 1', 
  b2: 'text 2', 
  b3: 'text 3' 
}; 
 
 
for (let i = 1; i <= 3; i++) { 
  box1.appendChild(document.createElement('h3')).innerHTML = texts['b' + i]; 
}

<div id="box1"></div>

Или, как вариант заменить let на var, и вызывать из глобального window (но, как мне кажется, это не самый лучший вариант):

let box1 = document.querySelector('#box1'); 
 
var b1 = 'text 1'; 
var b2 = 'text 2'; 
var b3 = 'text 3'; 
 
for (let i = 1; i <= 3; i++) { 
  box1.appendChild(document.createElement('h3')).innerHTML = window['b' + i]; 
}