#javascript #arrays #createelement
#javascript #массивы #createelement
Вопрос:
Я пытаюсь создать несколько divs и присвоить им уникальный идентификатор с помощью javascript, предпочтительно имя состояния, как оно напечатано в журнале консоли. Однако ничего из того, что я пробую, не работает. Любой совет? Я следил за каждым подобным вопросом и ответом, которые я могу найти на этом форуме, но ничего не работает для моей ситуации.
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="myDiv">
</div>
<script>
getData(); //call function
async function getData(){ //define an asynchronous function
var response = await fetch('covid.csv'); //call data and assign it to a variable
var data = await response.text(); //parse the text from the response and assign it to variable
console.log(data);
var table = data.split('n').slice(1, -1); //delineate rows of the table by splitting them at the line break. This results in an array such as: [0] Alaska, 12, 1.33 etc
console.log(table);
table.forEach(row => {
var columns = row.split(',');
var state = columns[0];
var deaths = columns[1];
var deathsPer = columns[2];
console.log(state, deaths, deathsPer);
/*
document.getElementById("myDiv").innerHTML = //DOESN'T WORK need to create new div for each row
state
" death toll is "
deaths
" and a death rate of "
deathsPer
;
*/
for(var i=0;i<50;i ){ //DOESN'T WORK creates 50 divs x50
var newDiv = document.createElement("div");
document.body.appendChild(newDiv);
newDiv.setAttribute("id", 'textBar' i);
}
});
}
</script>
</body>
</html>
Комментарии:
1. Атрибуты элементов доступны как свойства их объектов. Это означает, что вы можете просто использовать
newDiv.id = 'textBar' i;для назначения идентификатора.2. Вам также, вероятно, следует удалить цикл for (но сохранить его содержимое), поскольку вы создаете 50
divфайлов в строке.3. спасибо, но тогда это ничего не делает… это просто создает один div, вот в чем проблема. есть идеи, как заставить его выполнять итерацию для каждой строки?
Ответ №1:
Вы уже зацикливаетесь на своем forEach , поэтому нет необходимости в дополнительном цикле. И внутри этого дополнительного цикла вы не устанавливали innerHML:
Версия ES6
const $myDiv = document.getElementById('myDiv');
(async function getData() {
// Just for the demo
const data = 'nVirginia,12,1nCalifornia,24,3nFlorida,36,11n';
const table = data.split('n').slice(1, -1);
table.forEach(row => {
const [ state, deaths, deathsPer ] = row.split(','),
$newDiv = document.createElement("div");
$newDiv.innerHTML = `${state} death toll is ${deaths}
and a death rate of ${deathsPer}`;
$newDiv.id = `textBar_${state}`;
$myDiv.appendChild($newDiv);
});
})(); <div id="myDiv"></div> Более простая для понимания версия (только с функциями ES6, которые вы уже использовали)
const $myDiv = document.getElementById('myDiv');
getData();
async function getData() {
// Just for the demo
const data = 'nVirginia,12,1nCalifornia,24,3nFlorida,36,11n',
table = data.split('n').slice(1, -1);
table.forEach(row => {
const columns = row.split(','),
state = columns[0],
deaths = columns[1],
deathsPer = columns[2],
$newDiv = document.createElement("div");
$newDiv.innerHTML = state " death toll is " deaths
" and a death rate of " deathsPer;
$newDiv.id = "textBar_" state;
$myDiv.appendChild($newDiv);
});
} <div id="myDiv"></div> Комментарии:
1. Спасибо, но то, как вы это написали, выходит за рамки моего понимания, это сценарий ecma? Я все еще изучаю javascript и понимаю его только в самой простой форме, я еще не изучил ecma. Я буду работать над его реализацией.
2. о, ничего себе, это сработало! Спасибо! Я слежу за видео на YouTube и не научился использовать символ $ или не знаю, почему вы его использовали, но я буду работать над этим.
3. Хорошо, извините, я добавил более простую версию. Строки
${}внутри них являются шаблонными литералами , и я добавил a$в имена переменных, содержащих элементы DOM (HTML), просто в качестве соглашения, чтобы я сразу знал, что содержит эта переменная при чтении кода. Это не обязательное условие4. Да, еще раз спасибо! Я не уверен, должен ли я начать другой вопрос для этого, но я ранее использовал deathsPer.toFixed(2), чтобы округлить цифру до 2 знаков после запятой, но теперь консоль выдает мне сообщение об ошибке и говорит: «Uncaught (в обещании) Ошибка типа: deathsPer.toFixed не является функцией» Есть идеи, почему это происходит сейчас?
5. Когда вы разбиваете строку строки, вы получаете строки, а у них нет
toFixedметода. Вам нужно преобразовать их в числа:const deathsPer = parseFloat(columns[2]);тогда вы можете использоватьdeathsPer.toFixed(2)
Ответ №2:
Возможно, это потому, что if создаваемого вами div не являются уникальными, потому что вы создаете первый раз textBar1 ..textBar50 и второй круг forEach вы создаете один и тот же идентификатор в div.
Попробуйте добавить индекс в forach следующим образом: table.forEach((row, id) => { и в строке, где вы устанавливаете атрибут, сделайте что-то вроде этого:
newDiv.setAttribute(«id», textBar-${id} - ${i} );