时间戳

首页 > 解决方案 > 无法获取列表项的值

javascript - 无法获取列表项的值

    问题描述

    要求当您单击列表项时，该函数起作用并显示其值。列表最初是空的，项目是动态添加的。不要使用 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);
        
}

    标签： javascripthtml

    解决方案

    这是一个有效的代码笔： 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 函数，我添加了一个模数运算来“循环”名称。

    推荐阅读