按钮点击结果：HTML中的“'功能'未定义”答案

【问题标题】：Button onclick result: "'Function' is not defined" in HTML按钮点击结果：HTML中的“'功能'未定义”
【发布时间】：2019-10-22 08:40:49
【问题描述】：

我正在使用 CodeSandbox 为我的社交媒体编写本地化访问点（只是为了玩他们拥有的 Vanilla 包裹包）。现在，我的按钮调用了单独的函数，但是当我选择一个按钮时，错误“Function 未定义”

我的按钮函数存储在与常规 JavaScript 不同的文件中。

我查看了 W3Schools 以了解这是如何完成的。有几次我什至尝试将函数放在 HTML 页面本身中，看看是否有帮助；但是，错误仍然出现。

下面是一个 HTML 示例：


<button type="button" onclick="sShowFunction()">
          Discord Status
        </button>
        <br />
        <p id="dshow">Reveal Discord Status</p>
        <script src="extras/buttons.js" type="text/javascript"></script>

这是js函数：


function sShowFunction() {
  document.getElementById("dshow").innerHTML = `
  <iframe src="https://discordapp.com/widget?id=<server id>&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
  `;
}

当我按下按钮以显示不和谐小部件时，我期望输出。相反，我产生了上述错误。我最好的猜测是我缺少一段代码来调用该函数。在控制台中，我收到此错误： sShowFunction' is defined but never used. (no-unused-vars)

【问题讨论】：

邮政编码和框链接
取决于你在哪里声明了函数 .. 可能无法从 html 级别访问 ..
这不是错误，而是 lint 警告：eslint.org/docs/rules/no-unused-vars
代码沙盒链接：ql80k.codesandbox.io

标签： javascript html function onclick codesandbox

【解决方案1】：

取决于你在哪里声明了函数 .. 可能无法从 html 级别访问 ..

确保你的 js 代码在有效的脚本标签内

<script>
  function sShowFunction() {
     document.getElementById("dshow").innerHTML = '
       <iframe src="https://discordapp.com/widget?id=<server id>&theme=dark" 
     width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
  ';
  }
</script>

并且不要使用反引号来包装字符串..使用引号

【讨论】：

我从一个名为extras/buttons.js 的单独文件中声明了按钮的功能。反引号是如此（我假设）代码沙箱可以识别 iframe 部分。我会尝试你的建议看看是否有效
好的，所以我将脚本放在 HTML 文件中，它可以工作。现在这让我很烦恼，因为我似乎无法从单独的文件中调用该函数。

【解决方案2】：

为什么不在按钮中放置一个类/ID，然后像这样使用监听器：

<button type="button" id="sShowFunction">
          Discord Status
</button>
<br />
<p id="dshow">Reveal Discord Status</p>

<script>
document.getElementById("sShowFunction").onclick = function() {
    document.getElementById("dshow").innerHTML = `
       <iframe src="https://discordapp.com/widget?id=<server id>&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
    `;
}
</script>

另外，您可能会从 iframe 内部收到此错误。

您不能在开发者控制台上发布一些错误照片或提供更多关于您的 javascript 的信息吗？

【讨论】：

我在控制台中遇到同样的错误：(index):27 Uncaught ReferenceError: sShowFunction is not defined at HTMLButtonElement.onclick ((index):27) onclick @ (index):27
但这没有意义，你没有使用 sShowFunction 作为函数。
尝试使用 Shift + F5 重新加载文档
Shift + F5 没有改变。我仍然得到错误。我使用 sShowFunction 作为对 JavaScript 中函数的调用。在这种情况下，是 JS 使用 innerHTML 显示 iframe。

【解决方案3】：

查看 chrome>console>buttons.js 的网络请求是否正常（不是红色），因为您提供的代码在我的本地机器上工作

【讨论】：

如何工作？意思是你在运行代码时没有收到红色？
no 当我运行代码时收到黑色请求（红色表示错误）

【解决方案4】：

所以我们需要做的是在codesandbox上创建一个静态模板。为此，请转到左侧边栏上的设置选项，然后单击创建 sandbox.config.json。然后在此，在模板下选择 -> static 选项，如下图所示。

为了节省时间，你可以fork这个 - https://codesandbox.io/s/static-vanilla-js-template-qzxfi

在这个 Github 问题上提到了一个详细的解决方案 - https://github.com/codesandbox/codesandbox-client/issues/1502#issuecomment-584886419

【讨论】：