Результат нажатия кнопки: «Функция не определена» в HTML
Я использую 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>
`;
}
Я ожидаю результат, когда нажимаю кнопку, чтобы отобразить виджет Discord. Вместо этого я выдаю вышеупомянутую ошибку. Я думаю, что мне не хватает фрагмента кода для вызова функции.
В консоли я получаю эту ошибку:
sShowFunction' is defined but never used. (no-unused-vars)
зависит от того, где вы объявили функцию .. может быть недоступна .. с уровня html
Это не ошибка, это предупреждение: eslint.org/docs/rules/no-unused-vars
Ссылка CodeSandbox: ql80k.codesandbox.io
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
зависит от того, где вы объявили функцию .. может быть недоступна .. с уровня html
убедитесь, что ваш код js находится внутри действительного тега scriptt
<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. Обратные кавычки (как я предполагаю) Code Sandbox могут распознавать раздел iframe. Я попробую то, что вы предлагаете, чтобы увидеть, работает ли это
Итак, я поместил скрипт в файл HTML, и он сработал. Это беспокоит меня сейчас, потому что кажется, что я не могу вызвать эту функцию из отдельного файла.
Почему бы вам не поместить класс/идентификатор в кнопку, а затем использовать слушатель следующим образом:
<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 раскрывает iframe с помощью innerHTML.
Посмотрите, в порядке ли chrome> console> network request для button.js (не красный), потому что предоставленный вами код работает на моем локальном компьютере
Как работает? означает, что вы не получаете красного цвета при запуске кода?
нет, когда я запускаю код, я получаю черный запрос (красный означает ошибку)
Итак, что нам нужно сделать, это создать статический шаблон на codeandbox. Для этого перейдите к параметрам настроек на левой боковой панели и нажмите «Создать песочница.config.json». Затем выберите в шаблоне -> параметр статический, как показано на изображении ниже.
В экономить время можно раскошелиться на этот - https://codesandbox.io/s/static-vanilla-js-template-qzxfi
В этой проблеме Github упоминается подробное решение — https://github.com/codesandbox/codesandbox-client/issues/1502#issuecomment-584886419
почтовые индексы и ссылка на ящик