TypeError：无法读取 HTMLButtonElement 处未定义的属性“值”答案

【问题标题】：TypeError: Cannot read property 'value' of undefined at HTMLButtonElementTypeError：无法读取 HTMLButtonElement 处未定义的属性“值”
【发布时间】：2019-10-11 01:27:33
【问题描述】：

我在 pug 上显示一个按钮下拉菜单以显示 HTML 页面。我正在使用 getElementsByClassName('dropdown-item') 来获取 HTMLCollection 中的所有按钮，然后对其进行迭代以获取 HTMLButtonElement。但是，我很难在警报框中接收 HTMLButtonElement 的值。

渲染 HTML 元素的 PUG 代码

    // 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.

【问题讨论】：

buttons[i] 值为undefined
使用此方法按下时如何获取每个按钮的值？
console.log(buttons)的结果是什么
console.log(buttons) 结果是 HTMLCollection(3) [button#cc0.dropdown-item, button#CZ4047.dropdown-item, button#CZ3003.dropdown-item, cc0: button#cc0 .dropdown-item, CZ4047: button#CZ4047.dropdown-item, CZ3003: button#CZ3003.dropdown-item]
console.log(buttons[0]) 给出

标签： javascript html node.js express pug

【解决方案1】：

如果你使用 jquery，你可以使用e.target.value

https://jsfiddle.net/9y34tk2v/

【讨论】：