如何实现点击<button>按钮时在console.log中输出指定文本？

以下是两种原生HTML+JS的实现方案，无需引入任何额外框架：

方案1：最简行内绑定（适合新手快速完成作业） #

直接在button标签的onclick属性中定义点击触发的逻辑即可，代码示例：

<button onclick="console.log('这里替换成作业要求输出的指定文本')">点击测试</button>

点击按钮后按F12（或右键页面选择「检查」）切换到Console标签，就能看到输出内容。

方案2：DOM事件监听（正规开发常用写法，方便后续扩展逻辑） #

把HTML结构和JS逻辑拆分书写，完整可运行的代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>按钮点击测试</title>
</head>
<body>
    <button id="logBtn">点击测试</button>

    <script>
        // 获取按钮元素
        const targetBtn = document.getElementById('logBtn')
        // 绑定点击事件
        targetBtn.addEventListener('click', () => {
            // 替换引号内的内容为作业要求输出的文本即可
            console.log('这里替换成作业要求输出的指定文本')
        })
    </script>
</body>
</html>

注意事项：

• 两种方案直接保存为.html文件，用浏览器打开即可测试
• 若控制台未看到输出，先确认日志过滤选项没有隐藏普通log类型的输出

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