如何添加event listener将按钮与抛硬币功能函数进行绑定

现有代码存在问题，无法实现预期的点击抛硬币效果，具体问题和修复方案如下：

现存问题 #

• 参数传递错误：flip函数定义时要求传入数值类型的max参数，但通过addEventListener绑定为点击事件回调时，触发时默认传入的参数是事件对象（Event），会导致随机数计算逻辑完全失效；同时原注释中测试用的flip(1)逻辑错误，Math.random()*1的结果永远小于1，取整后恒为0，只会返回tails，无法得到正反各50%的概率。
• 无结果输出逻辑：flip函数仅返回结果字符串，没有将结果展示给用户的逻辑，就算函数执行正常，用户也无法感知抛硬币的结果。
• HTML冗余：按钮标签上的空onclick=""属于无效冗余代码，可以删除。

修复方案 #

修改后代码 #

JS 代码

// 给max设置默认值2，实现正反各50%概率，也可自定义传值调整概率
const flip = (max = 2) => {
    const result = Math.floor(Math.random() * max) === 1 ? "heads" : "tails";
    // 新增结果输出逻辑，这里以弹窗为例，也可以替换为写入页面指定元素、控制台打印等
    alert(`抛硬币结果：${result}`);
    return result;
}

const quater = document.getElementById("coin");
// 用箭头函数包裹回调，可自定义控制传入flip的参数
quater.addEventListener("click", () => flip());

HTML 代码

<div class="random">
  <button id="coin">flip</button>
  <!-- 若需要把结果展示在页面中，可新增如下元素，把上面的alert替换为写入该元素的逻辑即可 -->
  <!-- <span id="coin-result"></span> -->
</div>

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