创建 onclick 按钮事件时遇到问题答案

【问题标题】：Having trouble creating an onclick button event创建 onclick 按钮事件时遇到问题
【发布时间】：2021-05-09 21:05:54
【问题描述】：

我正在尝试创建一个非常简单的网页，其中包含一个在 js 中运行此脚本的按钮。我有一个js文件和一个html文件。

//var button = document.querySelector("button")

//button.onclick = function() {
demo = function() {
    const CambDict = require("camb-dict");
    const dictionary = new CambDict.Dictionary();
    let lexicon = ["Flâneur", "Shibboleth", "Farrow", "Bon viveur/vivant"]
    let randLexicon = lexicon[Math.floor(Math.random() * lexicon.length)]
    console.log(randLexicon)

    dictionary.meaning(randLexicon)
        .then(console.log)
        .catch(console.error)
}

<!DOCTYPE html>
<html>
  <head>
    <title>Dictionary</title>
  </head> 
  <body>
    <h1>Simple Dictionary</h1>
    <button onclick="myFunction()">New word</button>
    <p id="demo"></p>
    <script src="dictionary.js"> function myFunction() </script>
  </body>
</html>

【问题讨论】：

标签： javascript html button onclick

【解决方案1】：

function myFunction () {
    const CambDict = require("camb-dict");
    const dictionary = new CambDict.Dictionary();
 let lexicon = ["Flâneur", "Shibboleth", "Farrow", "Bon viveur/vivant"]
    let randLexicon = lexicon[Math.floor(Math.random() * lexicon.length)]
    console.log(randLexicon)

    dictionary.meaning(randLexicon)
        .then(console.log)
        .catch(console.error)
}

<!DOCTYPE html>
<html>
  <head>
    <title>Dictionary</title>
  </head> 
  <body>
    <h1>Simple Dictionary</h1>
    <button onclick="myFunction()">New word</button>
    <p id="demo"></p>
  </body>
</html>

【讨论】：

你能说得更具体些吗？你遇到了什么错误？
错误：{ "message": "Uncaught ReferenceError: require is not defined", "filename": "stacksnippets.net/js", "lineno": 23, "colno": 22 }
好吧，原因是 require 没有定义。
对...如何解决？
您必须在 Node.js 中运行您的代码并安装 camb-dict。

【解决方案2】：

不要在带有 src 的脚本标签内添加额外的脚本。

SCRIPT 元素将脚本放置在文档中。这个元素可以在 HTML 文档的 HEAD 或 BODY 中出现任意次数。

脚本可以在 SCRIPT 元素的内容中定义，或者在外部文件中。如果没有设置 src 属性，用户代理必须将元素的内容解释为脚本。如果 src 有一个 URI 值，用户代理必须忽略元素的内容并检索通过 URI 编写脚本。

改为这样做：

<!DOCTYPE html>
<html>

<head>
  <title>Dictionary</title>
</head>

<body>
  <h1>Simple Dictionary</h1>
  <button id="demo-button">New word</button>
  <p id="demo"></p>
  <script src="dictionary.js">
  </script>
  <script>
    var button = document.getElementById("demo-button");
    button.addEventListener("click", myFunction);

    function myFunction() {
      console.log("button was clicked");
      // const CambDict = require("camb-dict");
      // const dictionary = new CambDict.Dictionary();
      // let lexicon = ["Flâneur", "Shibboleth", "Farrow", "Bon viveur/vivant"]
      // let randLexicon = lexicon[Math.floor(Math.random() * lexicon.length)]
      // console.log(randLexicon)

      // dictionary.meaning(randLexicon)
      // .then(console.log)
      // .catch(console.error)
    }
  </script>
</body>

</html>

【讨论】：

它只是在控制台开发者菜单中说“按钮被点击”但没有输出？如何让输出显示（完全披露：我是菜鸟）。
您还可以包含您的dictionary.js 文件吗？我注释掉了函数的逻辑，因为它不起作用。我没有你的字典的脚本
刚刚从这里抓取：openbase.com/js/camb-dict/documenta