Невозможно загрузить HTML до Javascript
Я новичок в Javascript и знаю, как загрузить html перед выполнением javascript.
Я проверил вопросы по stackoverflow и попытался реализовать предложенные решения, но ни одно из них не сработало.
Ниже приведен код различных кодов, которые я пробовал.
Написал тег скрипта перед концом тела
написал код javascript внутри функции и вызвал его внутри onload of body, но это тоже не сработало. (Также пытался прокомментировать documnet.onload = cal (); и выполнить).
<!DOCTYPE html>
<html>
<head>
<title>Age Calculator</title>
</head>
<body onload = "cal();">
<h1>Age Calculator</h1>
<p>Enter your age and find how many days you have been alive</p>
<script type = "text/javascript" src = "Age.js"></script>
</body>
</html>
//Javascript code
function cal(){
var age = prompt("How old are you?");
var days = age * 365.25;
alert("You are approx " + days + " days");
}
documnet.onload = cal();
Я хочу, чтобы html отображался до того, как пользователя спросят. Сколько вам лет?
посмотрите developer.mozilla.org/en-US/docs/Web/API/Document/readyState
посмотрите скрипку jsfiddle.net/vks9009/8w24k3xv. Этот код также будет работать, если длинный HTML-код
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Проблема в том, что prompt и подобные функции, такие как предупреждение блокировать браузера, предотвращают рендеринг до тех пор, пока всплывающее окно не будет отправлено или отменено.
<h1>Age Calculator</h1>
<p>Enter your age and find how many days you have been alive</p>
<script>
var age = prompt("How old are you?");
</script>Если вы хотите убедиться, что HTML отображается до того, как появится prompt, вы можете использовать setTimeout, давая браузеру возможность нарисовать HTML до вызова prompt:
<h1>Age Calculator</h1>
<p>Enter your age and find how many days you have been alive</p>
<script>
setTimeout(() => {
var age = prompt("How old are you?");
});
</script>Но еще лучшим решением было бы использовать подходящее модальное окно, такое как поле ввода с кнопкой submit, которое не будет блокировать в браузере. (лучше никогда не использовать alert, prompt и confirm, если это вообще возможно)
Спасибо за вашу помощь, но в учебнике, который я видел, только тег скрипта был помещен перед концом тела (</body> и html отображался перед Javascript. Браузер, используемый преподавателем и мной, - это Google Chrome. Не могли бы вы посоветовать, если он работал на него, тогда почему это не работает для меня. Учебнику может быть всего год или два.
В этом руководстве также использовался prompt? Можете ли вы опубликовать ссылку, чтобы мы могли ее просмотреть?
Да, это было, это из платного онлайн-курса, поэтому нельзя разместить ссылку.
Он должен был делать что-то разное, а не просто иметь простой тег <script>, за которым следует prompt, иначе вы бы столкнулись с той же проблемой, с которой столкнулись.
Прежде всего, предлагаю прочитать статью это. Теперь, исходя из источника этого документа, лучший способ (с использованием только Javascript) дождаться полной визуализации документа перед выполнением некоторого кода будет использовать прослушиватель события load элемента window, например:
window.addEventListener('load', function() {
// Everything has loaded!
});
Я добавил изображение в ваш код, чтобы проверить, как этот подход ожидает рендеринга изображения перед запросом пользователю:
<h1>Age Calculator</h1>
<p>Enter your age and find how many days you have been alive</p>
<img src = "https://via.placeholder.com/500?text=Test+Image">
<script>
function cal()
{
var age = prompt("How old are you?");
var days = age * 365.25;
alert("You are approx " + days + " days");
}
window.addEventListener('load', function()
{
// Everything has been rendered and loaded!
cal();
});
</script>
При разработке всегда открывайте консоль браузера. Таким образом вы увидите такие ошибки, как «Неперехваченная ошибка ссылки: документ не определен» (FYI, это
document)