TypeError: Cannot read property 'value' of undefined at HTMLButtonElement

TypeError: Cannot read property 'value' of undefined at HTMLButtonElement

我在 pug 上显示按钮的下拉菜单以显示 HTML 页面。我正在使用 getElementsByClassName('dropdown-item') 获取 HTMLCollection 中的所有按钮,然后迭代该集合以获取 HTMLButtonElement。但是,我很难在警告框中接收 HTMLButtonElement 的值。

PUG 代码渲染 HTML 个元素

    // Dropdown
    li.nav-item.dropdown
        button.btn.btn-primary.dropdown-toggle.coursesbutt(data-toggle="dropdown") Courses
        .dropdown-menu
        button.dropdown-item(id='cc0' value='Default' onclick="changeFilter(this)") Reset Filter
        each coursename in coursecode
            button.dropdown-item(id=`${coursename}` value=`${coursename}` onclick="changeFilter(this)") #{coursename}

Javascript 提取按钮元素

    script.
        var buttons = document.getElementsByClassName('dropdown-item');
        for(var i=0; i<buttons.length; i++){
            buttons[i].addEventListener("click", function(){ 
                alert(buttons[i].value); 
            })
        }

控制台输出

    Uncaught TypeError: Cannot read property 'value' of undefined at HTMLButtonElement.

如果您正在使用 jquery,您可以使用 e.target.value

https://jsfiddle.net/9y34tk2v/