按钮onclick结果：HTML中的“未定义'功能'”

Question

我正在使用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)

Answer 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>

并且不要将反斜线用于换行字符串。使用引号

Answer 2

为什么不将class / 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的更多信息？

Answer 3

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

Answer 4

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

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

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