Итак, у меня есть приложение, которое просто отображает одну страницу HTML с некоторыми JS logi c.
Теперь я хочу создать кнопки для каждой записи в массиве:
let arrayButtons = [
{
title: "Apple",
source: "http://www.cnn.com",
icon: '\'./resources/Icon_Apple.png\'',
},
{
title: "Raspberry",
source: "http://www.cnn.com",
icon: '\'./resources/Icon_Raspberry.png\'',
},
{
title: "Kiwi",
source: "http://www.cnn.com",
icon: '\'./resources/Icon_Kiwi.png\'',
}
]
for (var i = 0; i < arrayButtons.length; i++) {
document.getElementById("buttons").innerHTML +=
"<div><button class='changeButton'><i class=\"icon\"></i>" +
arrayButtons[i].title + "</button></div>";
}
Как видите, я пробую две версии для доступа к селектору классов: class='changeButton', а также class=\"icon\".
Вот структура файла в целом:
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.changeButton {
width: 90%;
box-shadow: 0px 10px 14px -7px black;
background-color: green;
}
.changeButtonContainer {
background-color: red;
height: 100%;
}
.icon {
//background: url('./resources/Icon_Apple.png') no-repeat; // dynamically adjust icon based on icon URL in the array
width: 50px;
height: 57px;
}
</style>
</head>
<body>
<div>
<div>
<div id="buttons" class="changeButtonContainer"></div>
</div>
<div>
<p>My Footer</p>
</div>
</div>
<script>
window.onload = function () {
displayButtons();
};
function displayButtons() {
let arrayButtons = [
{
title: "Apple",
source: "http://www.cnn.com",
icon: '\'./dashboardresources/Icon_Apple.png\'',
},
{
title: "Raspberry",
source: "http://www.cnn.com",
icon: '\'./dashboardresources/Icon_Raspberry.png\'',
},
{
title: "Kiwi",
source: "http://www.cnn.com",
icon: '\'./dashboardresources/Icon_Kiwi.png\'',
}
]
for (var i = 0; i < arrayButtons.length; i++) {
document.getElementById("buttons").innerHTML +=
"<div><button class='changeButton'><i class=\"icon\"></i>" + arrayButtons[i].title + "</button></div>";
}
}
</script>
</body>
</html>
Знаете ли вы, почему селекторы классов не применяются? Помощь будет высоко ценится.