JavaScript数学运算问题：innerHTML赋值仅输出单个变量如何解决

错误原因 #

你代码的问题出在innerHTML赋值语句的写法上：

document.getElementById("demo").innerHTML = x, z;

这里的逗号是JavaScript的逗号运算符，它的优先级远低于赋值运算符=，所以实际执行逻辑为：

• 先执行document.getElementById("demo").innerHTML = x，把x的值写入DOM元素
• 再单独执行z的取值操作，这个操作的结果没有被任何变量/属性接收，属于无效执行
  因此页面最终只会显示x的计算结果。

修正方案 #

如果要同时输出两个变量的值，将两个变量拼接为完整字符串后再赋值给innerHTML即可，参考写法：

// 写法1：用加号拼接，中间加空格分隔
document.getElementById("demo").innerHTML = x + ' ' + z;

// 写法2：用<br>标签实现两个值换行显示
document.getElementById("demo").innerHTML = x + '<br>' + z;

// 写法3：用模板字符串实现，可读性更高
document.getElementById("demo").innerHTML = `${x} ${z}`;

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