如何在JavaScript的onclick事件与if函数中使用&&？代码故障排查

你的代码没法正常运行主要有两个核心问题，咱们一步步来修正：

问题1：onclick事件没有传递正确的参数 #

你在HTML里写onclick="p();"的时候，没有给函数p()传任何参数，所以函数里的e是undefined，自然没法和'p1'、'p2'做比较。

解决办法：在onclick里传递当前按钮的ID（或者事件对象），比如把按钮的onclick改成：

<button id="p1" onclick="p(this.id)" >p1</button>
<button id="p2" onclick="p(this.id)" >p2</button>

这样调用p()时，就会把按钮的ID字符串（比如'p1'）传给参数e。

问题2：innerHTML返回的是字符串，类型不匹配导致比较错误 #

document.getElementById("p3").innerHTML返回的是字符串类型的"2"，你直接和数字2比较，虽然JS会隐式转换，但有时候会出问题（比如如果innerHTML是"2 "带空格就会出错），最好显式转成数字类型。

解决办法：用Number()或者parseInt()把字符串转成数字：

var p = Number(document.getElementById("p3").innerHTML);

修正后的完整代码 #

HTML部分 #

<button id="p1" onclick="p(this.id)" >p1</button>
<button id="p2" onclick="p(this.id)" >p2</button>
<p id="p3">2</p>

JavaScript部分 #

function p(e){
    var p = Number(document.getElementById("p3").innerHTML);
    // 用&&同时判断两个条件，逻辑本身是对的，现在参数和类型都正确了
    if('p1' === e && p !== 2){
        alert('yes');
    }
    if('p2' === e && p === 2){
        alert('no');
    }
}

另外补充个小建议：比较的时候尽量用全等运算符===和!==，避免隐式转换带来的意外问题，这是JS里的最佳实践哦～

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