Блог

Требуется, чтобы при нажатии на элемент списка функция работала и отображала его значение. Список изначально пуст, элементы добавляются динамически. Не используйте 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);
        
}
 

Вот рабочий 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 я добавил операцию модуля для «зацикливания» над именами.