计算器开发问题：.includes方法失效与按钮.disable不生效排查

开发JavaScript计算器时，需求是当显示区域mainScreenArea中不含数字时，禁用小数点按钮，但使用String.prototype.includes()判断数组时，无论显示区域是否有数字，结果始终为false，导致按钮无法正常禁用。

问题代码 #

case ".":
    const numberForDecimal = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
    const numberForDecimalString = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]
    const dotButton = document.getElementsByClassName("dot-operator");
    if (mainScreenArea.innerHTML.includes(numberForDecimal)) {
      dotButton.disabled = false
    } else if (mainScreenArea.innerHTML.includes(numberForDecimalString)) {
      dotButton.disabled = false
    } else {
      mainScreenArea.innerHTML += calcKeyValue
      dotButton.disabled = true
    }

问题原因 #

1. includes()不支持直接传入数组：String.prototype.includes()的参数只能是单个字符串或值，传入数组时，JS会自动将数组转为字符串（比如[1,2,3]会变成"1,2,3"），而显示区域的内容里不可能出现这个完整的数组字符串，所以判断永远返回false。
2. HTMLCollection取值错误：getElementsByClassName()返回的是一个HTMLCollection集合，不是单个DOM元素，直接给集合设置disabled属性是无效的，必须取集合中的单个元素（比如第一个匹配项）。

修正方案 #

用正则表达式直接检查显示区域是否包含数字字符，同时修正DOM元素的取值问题：

case ".":
    // 用正则/\d/匹配0-9的数字字符，检查显示区域是否存在数字
    const hasNumber = /\d/.test(mainScreenArea.innerHTML);
    // 取HTMLCollection中的第一个按钮元素
    const dotButton = document.getElementsByClassName("dot-operator")[0];
    
    // 根据是否有数字设置按钮禁用状态
    dotButton.disabled = !hasNumber;
    
    // 只有当存在数字，且当前内容没有小数点时，才添加小数点
    if (hasNumber && !mainScreenArea.innerHTML.includes(".")) {
      mainScreenArea.innerHTML += calcKeyValue;
    }

额外优化 #

• 无需维护数字数组，正则/\d/更简洁高效，直接匹配所有数字字符。
• 增加了重复小数点的判断，避免同一数字后多次添加小数点。

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