Javascript 无法获取列表项的值<；ul>；

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

开关（a）{
案例1：{
变量名称=[“Value1”、“Value2”、“Value3”]；
对于（var i=0；i

这是一个工作代码笔：

HTML:

JS

---

我添加了CSS样式，因为如果没有它，您的空列表的高度将接近0，添加颜色可以确保我们知道单击的位置。对于javascript函数，我在名称上的“循环”中添加了一个模运算。

您的代码毫无意义。看起来我误解了@Kidas的回答

This is my list:
<ul id = "subCategoryUL" onclick="selectSubCategory()">

</ul>

#subCategoryUL {
    min-width: 50px;
    min-height: 50px;
    background-color: red;
}

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);
}