创建按钮onclick点击事件异常，HTML调用外部JS词典脚本不生效

问题梳理 #

• JS端问题
  1. require()是Node.js专属语法，浏览器原生不支持，且你使用的camb-dict是Node端工具库，无法直接在浏览器环境运行
  2. 定义的函数名为demo()，但HTML中绑定的点击事件调用的是myFunction()，两者名称不匹配，无法触发执行
  3. 查询结果仅输出到控制台，没有绑定到页面DOM元素，用户无法在网页上看到结果
• HTML端问题
  1. 引入外部JS的<script>标签写法错误：带src属性的外部引入script标签，标签内部不能写内联代码，两种用法只能二选一
  2. 点击事件绑定的函数名和JS文件内实际定义的函数名不一致

修正方案 #

如果要在前端实现该功能，建议替换为浏览器可调用的公开词典API，以下是适配后的可运行代码示例：

修正后的dictionary.js代码 #

// 替换为浏览器可直接调用的公开词典API做演示
async function myFunction() {
    const lexicon = ["Flâneur", "Shibboleth", "Farrow", "Bon viveur"]
    const randLexicon = lexicon[Math.floor(Math.random() * lexicon.length)]
    const demoEle = document.getElementById('demo')
    demoEle.innerText = `查询中：${randLexicon}`
    try {
        const res = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${randLexicon}`)
        const data = await res.json()
        const meaning = data[0]?.meanings[0]?.definitions[0]?.definition || '未查询到释义'
        demoEle.innerText = `${randLexicon}：\n${meaning}`
    } catch (err) {
        demoEle.innerText = `查询出错：${err.message}`
        console.error(err)
    }
}

修正后的HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <title>Dictionary</title>
  </head> 
  <body>
    <h1>Simple Dictionary</h1>
    <button onclick="myFunction()">New word</button>
    <p id="demo"></p>
    <!-- 单独引入外部JS文件，不要在标签内写代码 -->
    <script src="dictionary.js"></script>
  </body>
</html>

内容的提问来源于stack exchange，提问作者David M.