堆棧內存溢出
  簡體   English   中英

無法將 javascript 鏈接到 html 文件？

[英]cannot link javascript to html file?

 原文  2019-11-21 06:51:48  6   3    javascript/ html

問題描述

所以我有我正在嘗試做的實驗室，我的教授希望它在兩個單獨的文件中完成。 不幸的是，她是我遇到過的最差的 CS 老師之一，所以我幾乎必須自學一切。 通過將我的所有 js 代碼放在腳本標簽中，我能夠讓我的代碼在一個 html 文件中工作。 我很確定我正確鏈接了文件，但我又不確定。 我的 html 和 js 文件也位於同一目錄中。 這是我的代碼：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="author" content="David Smith">
  <meta name="discription" content="lab7">
  <meta name="keywords" content="lab7">
  <title>Lab7</title>
  <link type="text/css" rel="stylesheet" href="lab7.css" />
  <script type="text/javascript" src="lab7.js"></script> <!-- I tried linking here -->
</head>

<body>
  <script type="text/javascript" src="lab7.js"></script> <!-- and tried linking here -->

  <div>
    <span id="firstNum"></span>
    <span id="op"></span>
    <span id="secondNum"></span>
    <span>=</span>
    <span><input class="textbox" id="textbox" type="text"></span>
    <span><input id="button" type="submit" name="button" value="enter" onclick="button();" /></span>
    <span id="timer"></span>
  </div>

  <div>
    <span>Number correct: </span>
    <span id="numCorrect">0</span>
  </div>

  <div>
    <span><input id="button2" type="submit" name="button" value="try again!" onclick="button2();" /></span>
  </div>
</body>

</html>

.js 文件：

var ops = ['+', '-', '*'];
var timeLeft = 30;
var timer = document.getElementById('timer');
var firstNum = document.getElementById('firstNum');
var secondNum = document.getElementById('secondNum');
var op = document.getElementById('op');
var randomOp = ops[Math.floor(Math.random() * 3)];
var randomFirstNum = Math.floor(Math.random() * 10 + 1);
var randomSecondNum = Math.floor(Math.random() * 10 + 1);

firstNum.innerHTML = randomFirstNum;
op.innerHTML = randomOp;
secondNum.innerHTML = randomSecondNum;

var timerId = setInterval(countdown, 1000);
var currentCorrectAnswers = 0;


document.getElementById('button').addEventListener("click",
  function () {
    var answer = document.getElementById("textbox").value;
    var numCorrect = document.getElementById("numCorrect");


    if (randomOp == '+') {
      if (randomFirstNum + randomSecondNum == answer) {
        document.getElementById("textbox").style.backgroundColor = "white";
        currentCorrectAnswers += 1;
        randomOp = ops[Math.floor(Math.random() * 3)];
        randomFirstNum = Math.floor(Math.random() * 10 + 1);
        randomSecondNum = Math.floor(Math.random() * 10 + 1);
        firstNum.innerHTML = randomFirstNum;
        op.innerHTML = randomOp;
        secondNum.innerHTML = randomSecondNum;
      } else {
        document.getElementById("textbox").style.backgroundColor = "red";
      }
    } else if (randomOp == '-') {
      if (randomFirstNum - randomSecondNum == answer) {
        document.getElementById("textbox").style.backgroundColor = "white";
        currentCorrectAnswers += 1;
        randomOp = ops[Math.floor(Math.random() * 3)];
        randomFirstNum = Math.floor(Math.random() * 10 + 1);
        randomSecondNum = Math.floor(Math.random() * 10 + 1);
        firstNum.innerHTML = randomFirstNum;
        op.innerHTML = randomOp;
        secondNum.innerHTML = randomSecondNum;
      } else {
        document.getElementById("textbox").style.backgroundColor = "red";
      }
    } else {
      if (randomFirstNum * randomSecondNum == answer) {
        document.getElementById("textbox").style.backgroundColor = "white";
        currentCorrectAnswers += 1;
        randomOp = ops[Math.floor(Math.random() * 3)];
        randomFirstNum = Math.floor(Math.random() * 10 + 1);
        randomSecondNum = Math.floor(Math.random() * 10 + 1);
        firstNum.innerHTML = randomFirstNum;
        op.innerHTML = randomOp;
        secondNum.innerHTML = randomSecondNum;
      } else {
        document.getElementById("textbox").style.backgroundColor = "red";
      }
    }
    numCorrect.innerHTML = currentCorrectAnswers;
  });

document.getElementById('button2').addEventListener("click",
  function () {
    window.location.reload(true);
  });


function countdown() {
  if (timeLeft == -1) {
    //timeLeft = 30;
    clearTimeout(timerId);
    alert("you answered " + currentCorrectAnswers + " questions correctly!");
  } else {
    timer.innerHTML = 'time left: ' + timeLeft + ' seconds';
    timeLeft--;
  }
}

有人可以讓我知道我做錯了什么嗎？ 謝謝！

3 個解決方案

解決方案1
 1 已采納  2019-11-21 06:59:59

您的<script>標記位於它所引用的 HTML 標記之上。 這意味着您的 javascript 正在嘗試使用尚不存在的 HTML 標記，因為所有 HTML 和 JS 代碼都是從上到下加載的。 如果您將<script>標簽移動到<body>標簽的底部，您的代碼將運行良好：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="author" content="David Smith">
    <meta name="discription" content="lab7">
    <meta name="keywords" content="lab7">
    <title>Lab7</title>
    <link type="text/css" rel="stylesheet" href="lab7.css" />
</head>

<body>
    <div>
        <span id="firstNum"></span>
        <span id="op"></span>
        <span id="secondNum"></span>
        <span>=</span>
        <span><input class="textbox" id="textbox" type="text"></span>
        <span><input id="button" type="submit" name="button" value="enter" onclick="button();" /></span>
        <span id="timer"></span>
    </div>

    <div>
        <span>Number correct: </span>
        <span id="numCorrect">0</span>
    </div>

    <div>
        <span><input id="button2" type="submit" name="button" value="try again!" onclick="button2();" /></span>
    </div>

    <script type="text/javascript" src="lab7.js"></script> <!-- I tried linking here -->
</body>

</html>

您可以在此處找到有關此行為的更多信息。

解決方案2
 0  2019-11-21 06:58:37

只需將 your.js 文件放在<body>標記的末尾即可。 錯誤是，您的 js 代碼試圖訪問尚未呈現的 html 元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="David Smith">
        <meta name="discription" content="lab7">
        <meta name="keywords" content="lab7">
        <title>Lab7</title>
        <link type="text/css" rel="stylesheet" href="lab7.css"/>
    </head>
<body>



<div> 
<span id="firstNum"></span>
<span id="op"></span>
<span id="secondNum"></span>
<span>=</span>
<span><input class="textbox"id="textbox"type="text"></span>
<span><input id="button" type="submit" name="button" value="enter" onclick="button();"/></span>
<span id="timer"></span>
</div>

<div>
<span>Number correct: </span>
<span id="numCorrect">0</span>
</div>

<div>
<span><input id="button2" type="submit" name="button" value="try again!" onclick="button2();"/></span>
</div>
<script type="text/javascript" src="lab7.js"></script> <!-- and tried linking here -->

</body>
</html>

解決方案3
 0  2019-11-21 06:58:49

它現在工作。 嘗試將其放置在正文之后或在 javascript 文件中添加負載 function，就像有一個文檔一樣。准備好 function 用於 ZA5A565B1076EC39A8 的 function

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="David Smith">
        <meta name="discription" content="lab7">
        <meta name="keywords" content="lab7">
        <title>Lab7</title>
        <link type="text/css" rel="stylesheet" href="lab7.css"/>
    </head>
<body>



<div> 
<span id="firstNum"></span>
<span id="op"></span>
<span id="secondNum"></span>
<span>=</span>
<span><input class="textbox"id="textbox"type="text"></span>
<span><input id="button" type="submit" name="button" value="enter" onclick="button();"/></span>
<span id="timer"></span>
</div>

<div>
<span>Number correct: </span>
<span id="numCorrect">0</span>
</div>

<div>
<span><input id="button2" type="submit" name="button" value="try again!" onclick="button2();"/></span>
</div>

</body>
<script type="text/javascript" src="lab7.js"></script>  <!-- Try linking here -->
</html>

暫無
暫無

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

相關問題 為什么我的外部 javascript 文件無法鏈接到我的 html？ html / javascript鏈接到本地​​文件 無法將JSX腳本鏈接到html文件 通過Javascript附加/鏈接HTML文件 通過javascript鏈接到另一個.html文件 編寫 HTML 按鈕以鏈接到 JavaScript 文件 javascript從在線鏈接獲取html文件 無法從 html 文件中引用 javascript 文件 在哪里以及如何鏈接html文件，css文件，javascript文件和jsp Golang html模板無法在html文件中調用javascript文件
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM