Converting external JS & CSS into HTML
Question
I'm trying to combine an external JS file & CSS file into 1 HTML file by putting them internally in the HTML. The CSS is working fine with the style tag but not the JS file.
What should I change over here to link them up together?
Here is the external js file I got online:
<script>
function variables(){
var btn_start = document.getElementById("start");
var btn_reset = document.getElementById("reset");
var btn_check = document.getElementById("check");
var main_div = document.getElementById("main-div");
var guess_box = document.getElementById("guess-box");
var all_guesses = document.getElementById("all-guesses");
var high_or_low = document.getElementById("high-or-low");
var random_num = Math.floor(Math.random() * 100) + 1;
var count_guess = 1;
}
function start() {
main_div.style.visibility = "visible";
}
function checkGuess() {
var your_guess = Number(guess_box.value);
if (count_guess <= 10) {
if (your_guess < random_num) {
all_guesses.textContent += your_guess + " ";
high_or_low.textContent = "Your Guess is Low";
high_or_low.classList.add("wrong");
count_guess++;
guess_box.value = '';
}
else if (your_guess > random_num) {
all_guesses.textContent += your_guess + " ";
high_or_low.textContent = "Your Guess is High";
high_or_low.classList.add("wrong");
count_guess++;
guess_box.value = '';
}
else {
all_guesses.textContent += your_guess + " ";
high_or_low.textContent = "Congratulations! You Guessed it Right.";
high_or_low.classList.add("success");
guess_box.value = '';
gameOver();
}
}
else {
all_guesses.textContent += your_guess + " ";
high_or_low.textContent = "Game Over! Sorry, your chances are over.";
high_or_low.classList.add("wrong");
guess_box.value = '';
gameOver();
}
}
function gameOver() {
btn_check.disabled = true;
guess_box.disabled = true;
}
</script>
Here is the the body:
<body>
<script src="js/main.js"></script> // <--What should I change here
</body>
2 answers
solution1
0 2020-10-22 02:08:05
在 js 文件中，删除<script>标签
solution2
0 2020-10-22 02:15:59
I'm interpreting your question to mean that you're trying to include the JS from the external file inline in your HTML wrapped in <script> tags.
If that's right, make sure you include the script after any DOM elements you're assigning to variables and referencing in the JS, or at least make sure that variables() is called after those elements in the DOM.
If your script occurs before those elements in the DOM, it will fail because it is executed and will look for elements that haven't been constructed yet.
Also, the way your variables are scoped, the functions have no access to the variables like guess_box , main_div etc. so they will do nothing...
variables() needn't be a function anyway -- if you take the function wrapper off it and just assign the variables above the other function statements, the code will work because the functions all have access to the variables in their parent scope. Consider wrapping the code in an IIFE so you're avoiding creating global variables.
<!doctype html>
<html>
<head>
<!-- head stuff -->
</head>
<body>
<!-- end-user visible DOM elements here before JS -->
<script>
(function (){
var btn_start = document.getElementById("start");
var btn_reset = document.getElementById("reset");
var btn_check = document.getElementById("check");
var main_div = document.getElementById("main-div");
var guess_box = document.getElementById("guess-box");
var all_guesses = document.getElementById("all-guesses");
var high_or_low = document.getElementById("high-or-low");
var random_num = Math.floor(Math.random() * 100) + 1;
var count_guess = 1;
function start() {
main_div.style.visibility = "visible";
}
function checkGuess() {
var your_guess = Number(guess_box.value);
if (count_guess <= 10) {
if (your_guess < random_num) {
all_guesses.textContent += your_guess + " ";
high_or_low.textContent = "Your Guess is Low";
high_or_low.classList.add("wrong");
count_guess++;
guess_box.value = '';
}
else if (your_guess > random_num) {
all_guesses.textContent += your_guess + " ";
high_or_low.textContent = "Your Guess is High";
high_or_low.classList.add("wrong");
count_guess++;
guess_box.value = '';
}
else {
all_guesses.textContent += your_guess + " ";
high_or_low.textContent = "Congratulations! You Guessed it Right.";
high_or_low.classList.add("success");
guess_box.value = '';
gameOver();
}
}
else {
all_guesses.textContent += your_guess + " ";
high_or_low.textContent = "Game Over! Sorry, your chances are over.";
high_or_low.classList.add("wrong");
guess_box.value = '';
gameOver();
}
}
function gameOver() {
btn_check.disabled = true;
guess_box.disabled = true;
}
})();
</script>
</body>
</html>
Alternatively, since you have indicated in a comment that you'd like to include the JS in the head element, you can use an event listener to execute the code once the DOM is loaded, like so:
<head>
<script>
/*
this tells the browser to run the init() function
only when the webpage has been parsed by the browser
i.e. when all the elements 'exist'
*/
document.addEventListener('DOMContentLoaded', init);
/*
we wrap all the variable assignments and game logic in a function
we can assign to handle an event, specifically the event above,
'DOMContentLoaded'
*/
function init (){
var btn_start = document.getElementById("start");
var btn_reset = document.getElementById("reset");
var btn_check = document.getElementById("check");
var main_div = document.getElementById("main-div");
var guess_box = document.getElementById("guess-box");
var all_guesses = document.getElementById("all-guesses");
var high_or_low = document.getElementById("high-or-low");
var random_num = Math.floor(Math.random() * 100) + 1;
var count_guess = 1;
/*
if the start() function needs to run automatically,
rather than being triggered by a user interaction (button being
pushed etc), just run it in this init() event handler
function we're wrapping the function declaration in:
*/
start();
function start() {
main_div.style.visibility = "visible";
}
function checkGuess() {
var your_guess = Number(guess_box.value);
if (count_guess <= 10) {
if (your_guess < random_num) {
all_guesses.textContent += your_guess + " ";
high_or_low.textContent = "Your Guess is Low";
high_or_low.classList.add("wrong");
count_guess++;
guess_box.value = '';
}
else if (your_guess > random_num) {
all_guesses.textContent += your_guess + " ";
high_or_low.textContent = "Your Guess is High";
high_or_low.classList.add("wrong");
count_guess++;
guess_box.value = '';
}
else {
all_guesses.textContent += your_guess + " ";
high_or_low.textContent = "Congratulations! You Guessed it Right.";
high_or_low.classList.add("success");
guess_box.value = '';
gameOver();
}
}
else {
all_guesses.textContent += your_guess + " ";
high_or_low.textContent = "Game Over! Sorry, your chances are over.";
high_or_low.classList.add("wrong");
guess_box.value = '';
gameOver();
}
}
function gameOver() {
btn_check.disabled = true;
guess_box.disabled = true;
}
}
</script>
</head>
<body>
<!-- stuff -->
Wrapping all your stuff in a function and having that function execute when your web page actually being parsed by the browser using an event listener is another way to do what putting all your JS after the elements in the body does.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.