将外部 JS 和 CSS 转换为 HTML

Question

我试图通过将外部 JS 文件和 CSS 文件放在 HTML 内部将它们组合成 1 个 HTML 文件。 CSS 与 style 标签一起工作正常，但不适用于 JS 文件。

我应该在这里更改什么以将它们连接在一起？

这是我在网上得到的外部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>

这是身体：

<body>
   <script src="js/main.js"></script> // <--What should I change here
</body>

Answer 1

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

Answer 2

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

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

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

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

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>

或者，由于您已在注释中指出您希望将 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 -->

将所有内容包装在一个函数中，并在浏览器使用事件侦听器实际解析网页时执行该函数，这是另一种将所有 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