Передача переменных из JS в HTML

240
11 февраля 2020, 03:20

Нужно сделать так, чтобы в HTML коде (в тексте самой страницы) появлялись определенные значения переменных, которые рассчитываются в .js файле , сейчас я делаю это так:

let variable = 123;
document.getElementById('variable').innerHTML = variable;
<p>Текст в HTML: <span id = variable></span></p>

Но мне кажется это каким то костылем, так как при большом количестве переменных код в js выглядит очень громоздко, к тому же значение id должно быть уникальным, таким образом я не могу использовать одну и ту же переменную больше 1 раза

Подскажите решение

Answer 1

Весь вопрос в том, откуда именно берутся переменные и где именно в HTML они должны выводиться. Если переменные можно упаковать в массив, то вывести все значения можно, например, в цикле, динамически создавая span'ы и заполняя их значениями:

const vars = [123, 456, 789, 101112, 131415, 161718]; 
 
const p = document.getElementById('from-js'); 
 
for(let i = 0; i < vars.length; i++) { 
  const span = document.createElement('span'); 
  p.appendChild(span).textContent = vars[i]; 
}
span { 
  display: inline-block; 
  border: 1px solid red; 
  padding: 5px; 
  margin: 5px; 
}
<p id="from-js"></p>

READ ALSO
Валидность даты в JS
HTML

Валидность даты в JS

Преподователь придумал заданиеФорма регистрации

 321
Много балунов на яндекс карте с ховером
HTML

Много балунов на яндекс карте с ховером

Вот так подключаю яндекс карту

 245
Перебрать значения таблицы в vbscript
HTML

Перебрать значения таблицы в vbscript

На httml-странице имеем некоторую таблицу со своим именемВ первом столбце у нас есть чекбоксы

 263
Выделение всей строки узла TreeView в WF C#
c#

Выделение всей строки узла TreeView в WF C#

Помогите пожалуйста разобраться

 240