#javascript #html
#javascript #HTML
Вопрос:
Требуется, чтобы при нажатии на элемент списка функция работала и отображала его значение. Список изначально пуст, элементы добавляются динамически. Не используйте jQuery. Помогите, пожалуйста.
<ul id = "subCategoryUL" onclick="selectSubCategory()">
</ul>
switch (a) {
case 1:{
var names = ["Value1", "Value2", "Value3"];
for (var i = 0; i < names.length; i ) {
var name = names[i];
var li = document.createElement('li');
li.innerHTML = name;
li.style.font.fontsize(150);
document.getElementById('subCategoryUL').appendChild(li);
}
}
}
function selectSubCategory(){
var selectedSubCategory = document.getElementById('subCategoryUL');
console.log("subCategoryULR " selectedSubCategory.innerText);// subCategory);
}
Комментарии:
1. ваш код не имеет смысла.
Ответ №1:
Вот рабочий codepen: https://codepen.io/adebolle/pen/eYdbbad
HTML:
This is my list:
<ul id = "subCategoryUL" onclick="selectSubCategory()">
</ul>
CSS:
#subCategoryUL {
min-width: 50px;
min-height: 50px;
background-color: red;
}
JS
var names = ["Value1", "Value2", "Value3"];
function selectSubCategory(){
var selectedSubCategory = document.getElementById('subCategoryUL');
let index = selectedSubCategory.getElementsByTagName('li').length % names.length;
var li = document.createElement('li');
li.innerHTML = names[index];
li.style.font.fontsize(150);
document.getElementById('subCategoryUL').appendChild(li);
console.log("subCategoryULR " selectedSubCategory.innerText);// subCategory);
}
Я добавил стиль CSS, потому что без него ваш пустой список будет иметь высоту, близкую к 0, добавление цвета гарантирует, что мы знаем, куда нажимать. Для функции javascript я добавил операцию модуля для «зацикливания» над именами.
Комментарии:
1. Похоже, я неправильно понял вопрос, глядя на ответ @Kidas