堆棧內存溢出
  簡體   English   中英

將外部 JS 和 CSS 轉換為 HTML

[英]Converting external JS & CSS into HTML

 原文  2020-10-22 02:03:15  2   2    javascript/ html/ css

問題描述

我試圖通過將外部 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>

2 個解決方案

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

在 js 文件中，刪除<script>標簽

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

我將您的問題解釋為您正在嘗試將來自外部文件的 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 放在主體中元素之后的方法。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 將 HTML、CSS 和 JS 轉換為 React Native 將外部css / js文件包含到html頁面中 在HTML中包含外部js和CSS文件 外部CSS和JS文件未包含在HTML中 將帶有 css 和 js 代碼頁的 html 轉換為 node js 應用程序 使用JS將px值轉換為html / css中的％的代碼？ 如何$（“。class”）。load外部html div的一部分以及css / js 通過ajax調用將html，js和css小部件加載到外部站點 通過javascript檢索帶有外部js / css / images的整個html PHP解釋器使外部js和css成為html嵌入式代碼
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM