按钮点击结果：HTML 中的“'Function' 未定义”

Question

我正在使用 CodeSandbox 为我的社交媒体编写一个本地化访问点（只是为了享受他们拥有的 Vanilla 包裹包）。现在，我的按钮调用了单独的函数，但是当我 select 一个按钮时，出现错误“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 代码位于有效的 scritpt 标记内

<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 内部收到此错误。

你不能 post 开发者控制台上的错误照片或提供更多关于你的 javascript 的信息吗？

Answer 3

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

Answer 4

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

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

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

按钮点击结果：HTML 中的“'Function' 未定义”

Button onclick result: "'Function' is not defined" in HTML

html

javascript

function

onclick

codesandbox