将外部 JS 和 CSS 转换为 HTML

Question

I'm trying to combine an external JS file & CSS file into 1 HTML file by putting them internally in the HTML.我试图通过将外部 JS 文件和 CSS 文件放在 HTML 内部将它们组合成 1 个 HTML 文件。 The CSS is working fine with the style tag but not the JS file. CSS 与 style 标签一起工作正常，但不适用于 JS 文件。

What should I change over here to link them up together?我应该在这里更改什么以将它们连接在一起？

Here is the external js file I got online:这是我在网上得到的外部js文件：

    <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>

Answer 1

在 js 文件中，删除<script>标签

Answer 2

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.我将您的问题解释为您正在尝试将来自外部文件的 JS 内联包含在您的 HTML 中，该 JS 包含在<script>标签中。

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.如果这是对的，请确保在分配给变量并在 JS 中引用的任何 DOM 元素之后包含脚本，或者至少确保在 DOM 中的这些元素之后调用variables() 。

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.如果您的脚本出现在 DOM 中的这些元素之前，它将失败，因为它被执行并会查找尚未构建的元素。

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...此外，您的变量范围的方式，函数无法访问诸如guess_box ， main_div等变量，所以他们什么都不做......

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. variables()无论如何都不需要是一个函数——如果你去掉函数包装器并只将变量分配在其他函数语句之上，代码将起作用，因为函数都可以访问其父作用域中的变量。 Consider wrapping the code in an IIFE so you're avoiding creating global variables.考虑将代码包装在 IIFE 中，这样您就可以避免创建全局变量。

<!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:或者，由于您已在注释中指出您希望将 JS 包含在head元素中，因此您可以在加载 DOM 后使用事件侦听器来执行代码，如下所示：

<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.将所有内容包装在一个函数中，并在浏览器使用事件侦听器实际解析网页时执行该函数，这是另一种将所有 JS 放在主体中元素之后的方法。

将外部 JS 和 CSS 转换为 HTML

问题描述

2 个解决方案

解决方案1
0 2020-10-22 02:08:05

解决方案2
0 2020-10-22 02:15:59

将外部 JS 和 CSS 转换为 HTML

问题描述

2 个解决方案

解决方案1 0 2020-10-22 02:08:05

解决方案2 0 2020-10-22 02:15:59

解决方案1
0 2020-10-22 02:08:05

解决方案2
0 2020-10-22 02:15:59