Fatal编程技术网
  • javascript/
  • Javascript 转换外部JS&；将CSS转换为HTML

Javascript 转换外部JS&；将CSS转换为HTML

javascript html css

Javascript 转换外部JS&；将CSS转换为HTML,javascript,html,css,Javascript,Html,Css,我试图将一个外部JS文件和CSS文件组合成一个HTML文件，方法是将它们放在HTML的内部。CSS可以很好地处理样式标记，但不能处理JS文件 我应该在这里换些什么把它们连接起来 以下是我在线获得的外部js文件： <script> function variables(){ var btn_start = document.getElementById("start"); var btn_reset = docume

我试图将一个外部JS文件和CSS文件组合成一个HTML文件，方法是将它们放在HTML的内部。CSS可以很好地处理样式标记，但不能处理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>


函数变量（）{
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（“所有猜测”）；
var high_或_low=document.getElementById（“高或低”）；
var random_num=Math.floor（Math.random（）*100）+1；
var count_guess=1；
}
函数start（）{
main_div.style.visibility=“可见”；
}
函数checkGuess（）{
var your_guess=数字（guess_box.value）；
如果（计数\猜测随机数）{
所有猜测。text内容+=你的猜测+“”；
high_或_low.textContent=“您的猜测很高”；
高或低。类列表。添加（“错误”）；
计数+猜测++；
猜一猜。值=“”；
}
否则{
所有猜测。text内容+=你的猜测+“”；
high\u或\u low.textContent=“祝贺您！您猜对了。”；
高或低。类列表。添加（“成功”）；
猜一猜。值=“”；
gameOver（）；
}
}
否则{
所有猜测。text内容+=你的猜测+“”；
high\u或\u low.textContent=“游戏结束！抱歉，您的机会已经结束。”；
高或低。类列表。添加（“错误”）；
猜一猜。值=“”；
gameOver（）；
}
}
函数gameOver（）{
btn_check.disabled=真；
guess_box.disabled=true；
}
以下是正文：

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



//在js文件中，删除
标记
我将您的问题解释为，您试图将外部文件中的js内联到包装在
标记中的HTML中

如果正确，请确保在JS中分配给变量和引用的任何DOM元素之后包含脚本，或者至少确保在DOM中这些元素之后调用
variables（）

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

此外，根据变量的作用域，函数无法访问变量，如
guess\u box
、
main\u div
等。因此它们不会执行任何操作


variables（）
无论如何都不必是函数——如果您取下函数包装器，只需将变量分配到其他函数语句之上，代码就可以工作，因为函数都可以访问其父作用域中的变量。考虑在iFIE中包装代码，这样就避免了创建全局变量。

<!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放在正文元素之后的另一种方式。
从JS文件中删除脚本标记，它会起作用除了“不起作用”之外还有什么问题？它怎么不起作用？您会遇到哪些控制台错误？什么事情不应该发生？发生了什么不应该发生的事情？考虑提供一个还有你为什么要这样做。最好的做法是将HTML/CSS和JS分开。这个问题没有意义。您说您有一个外部js文件，但您显示的内容永远不会作为外部js文件使用，因为它有
和
，只有在HTML中包含脚本时才使用。因此，如果您想将其包含在HTML中，只需复制整个文件并将其粘贴到HTML文件中即可。这是行不通的，因为您没有脚本所指的元素，但这是另一个问题。是否可以将这些代码放在js中而不是放在中？您可以将js放在任意位置，只要在执行js之前解析代码操作的DOM元素。因此，例如，为了简单起见，我建议在body元素末尾的所有内容之后包含JS——您也可以将JS作为一个函数放在头部，并使用事件侦听器调用该函数，如
'DOMContentLoaded'
我在回答中添加了解释@xxxxx alice的意思的内容

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