虚拟键盘display元素读取value返回undefined，如何获取数值？

loginDisplay对应的是<div>元素，只有<input>、<textarea>这类表单控件才有value属性，普通块级元素不存在该属性，因此读取value会返回undefined。

你通过innerHTML给元素写入了文本内容，直接读取该内容后转为数值类型即可，优先推荐使用textContent替代innerHTML，避免读取到意外的HTML标签：

1. 读取显示区的纯文本内容
2. 用Number()、parseInt()或parseFloat()将文本转为数值类型

另外你当前的JS逻辑冗余度很高，可以给按键加data-val自定义属性简化代码，无需为每个按键单独写判断逻辑，修改后的完整代码如下：

调整后HTML结构 #

<div class="keyboard-login">
    <div class="display-login"></div>
    <div class="buttons">                      
        <div class="key-btn-container">        
            <button class="key key-btn" data-val="1">1</button>
        </div>
        <div class="key-btn-container">  
            <button class="key key-btn" data-val="2">2</button>
        </div>
        <!-- 其余按键同理，修改data-val值即可 -->
    </div>
</div>

调整后JS逻辑 #

keyboardLogin.addEventListener('click',(e)=>{
    // 仅处理按键点击事件
    if (!e.target.classList.contains('key-btn')) return
    // 追加按键值到显示区
    loginDisplay.textContent += e.target.dataset.val
    // 获取数值类型的显示结果，无输入时返回null可根据需求调整
    const displayValue = loginDisplay.textContent.trim() ? Number(loginDisplay.textContent) : null
    console.log(displayValue)
})

如果只需要整数结果，将Number替换为parseInt(loginDisplay.textContent, 10)即可。

内容的提问来源于stack exchange，提问作者Kei