Transforming external JavaScript and CSS scripts into HTML code

Question

Transforming external JavaScript and CSS scripts into HTML code

I am attempting to consolidate an external JS file and CSS file into a single HTML file by incorporating them internally in the HTML. While the CSS is functioning correctly with the style tag, the JS file seems to be causing some issues.

What adjustments should I make in order to properly connect these files?

Below is the external JS file that I obtained 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 where the body is located:

<body>
   <script> 
      // What changes need to be made here?
   </script> 
</body>

javascript html css

Answer 1

Answer №1

To clean up the JavaScript file, eliminate the <script> tag.

Answer 2

To clean up the JavaScript file, eliminate the <script> tag.

Answer 3

Answer №2

It seems like you're looking to embed external JavaScript within your HTML using <script> tags.

To ensure it works correctly, make sure the script is placed after any DOM elements that are being assigned to variables or referenced in the JavaScript code. Otherwise, if the script comes before these elements, it will fail because it will try to access elements that haven't been created yet.

Additionally, ensure that the functions have access to the variables such as guess_box, main_div, etc. If not, the functions won't be able to perform their intended actions.

You can simplify the code by removing the function wrapper from variables() and assigning variables at the top of the script. This way, all functions will have access to these variables within their parent scope. Consider wrapping the code in an IIFE to avoid 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) {
      // Game logic
    }
    else {
      // Game over logic
    }
  }

  function gameOver() {
      btn_check.disabled = true;
      guess_box.disabled = true;
  }
})();
</script>
</body>
</html>

Alternatively, you can place the JavaScript code in the head element and use an event listener to execute it once the DOM is fully loaded:

<head>
<script>
document.addEventListener('DOMContentLoaded', init);

function init (){
  // Variable assignments and game logic
  
  /*
    Auto-run start() function here if needed
  */
  start();
    
  function start() {
    // Start function logic
  }

  function checkGuess() {
    // Check guess function logic
  }

  function gameOver() {
      // Game over function logic
  }

}

</script>
</head>
<body>
<!-- body content -->

Using an event listener to run your JavaScript code after the DOM has been parsed by the browser provides another approach to ensuring that the script executes correctly without relying on the order of elements in the HTML file.

Answer 4

It seems like you're looking to embed external JavaScript within your HTML using <script> tags.

To ensure it works correctly, make sure the script is placed after any DOM elements that are being assigned to variables or referenced in the JavaScript code. Otherwise, if the script comes before these elements, it will fail because it will try to access elements that haven't been created yet.

Additionally, ensure that the functions have access to the variables such as guess_box, main_div, etc. If not, the functions won't be able to perform their intended actions.

You can simplify the code by removing the function wrapper from variables() and assigning variables at the top of the script. This way, all functions will have access to these variables within their parent scope. Consider wrapping the code in an IIFE to avoid 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) {
      // Game logic
    }
    else {
      // Game over logic
    }
  }

  function gameOver() {
      btn_check.disabled = true;
      guess_box.disabled = true;
  }
})();
</script>
</body>
</html>

Alternatively, you can place the JavaScript code in the head element and use an event listener to execute it once the DOM is fully loaded:

<head>
<script>
document.addEventListener('DOMContentLoaded', init);

function init (){
  // Variable assignments and game logic
  
  /*
    Auto-run start() function here if needed
  */
  start();
    
  function start() {
    // Start function logic
  }

  function checkGuess() {
    // Check guess function logic
  }

  function gameOver() {
      // Game over function logic
  }

}

</script>
</head>
<body>
<!-- body content -->

Using an event listener to run your JavaScript code after the DOM has been parsed by the browser provides another approach to ensuring that the script executes correctly without relying on the order of elements in the HTML file.

Transforming external JavaScript and CSS scripts into HTML code

Answer №1

Answer №2

Similar questions

Attaching an Event Listener to an array

Angular 4 - The Promising Outcome: How to Retrieve the Value upon Completion

Is there a way to effortlessly refresh a viewpage with fresh data directly from Firebase?

Display Loading Spinner with Bootstrap on Form Submission

Cannot access jquery within an angular directive

Prevent span/button clicks by graying them out and disabling the ability to click using HTML and JQuery

Tips for sending multiple values in a data object using jQuery AJAX

Best Way to Enable Push Notifications on Phonegap for iPhone - Top Suggestion

What is the best way to transmit the server response information from a fetch API to the client?

What is the best way to assign attributes to multiple HTML elements using an array?

Uploading Blobs using JavaScript and FormData

Adjust the width of the container and rotate the text accordingly

Conceal the rating of WordPress products when they have no ratings

Guide on how to position the icon for the Ant Design datepicker before the input selector rather than after

Tips for receiving a reply from S3 getObject in Node.js?

Using PHP Ajax to populate FullCalendar's eventSources

How do I insert a variable into my email content using PHP?

Utilizing repl.it for a database in Discord.js

When attempting to create text with Three.js using the TextBufferGeometry method, an error arises indicating that the property yMax is unreadable due

AngularJS radio buttons can now be selected as multiple options