Question

我试图选择一个按钮，但它一直返回null。我以前只使用过这种方法，但现在只返回null .. 我尝试使用＆＃34; document.GetElementById＆＃34;但这导致了同样的事情。希望有人能帮助我理解为什么这不能正常工作！

这是我的代码：

HTML（index.html的）：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Oppgaver kap 11 - Itslearning</title>
  </head>
  <body>
    <!--<script type="text/javascript" src="sketch.js"></script>-->
    <script type="text/javascript" src="todimArray.js"></script>
    <button id="knapp">Trykk her</button>
  </body>
</html>

的Javascript（todimArray.js）：

var poeng = [
    [12, 15, 15, 13],
    [16, 13, 14, 13],
    [17, 18, 17, 17],
    [9, 10, 7, 11],
    [12, 15, 19, 16],
    [12, 12, 17, 10],
    [19, 18, 20, 18],
    [16, 12, 17, 16]
];

var knapp = document.querySelector('#knapp');
var bodyEl = document.querySelector('body');
var pEl = document.createElement("p");

knapp.addEventListener('click', oppgA);

function oppgA() {
    var elevNr = Number(prompt("Skriv inn eleven sitt nummer:"));
    var setning = "";
    var sum = 0;
    var gjennomsnitt = 0;

    if (elevNr > 0 && elevNr < poeng.length) {
        for (var i = 0; i < poeng[elevNr - 1].length; i++) {
            sum += poeng[elevNr - 1][i];
        }
        gjennomsnitt = sum / poeng[elevNr - 1].length;

        setning = "Eleven sin poeng sum er " + sum + ". Gjennomsnittet er " + gjennomsnitt;
    }
    else{
      setning = "Tallet du skrev inn er ugyldig!";
    }
    p.innerHTML = setning;
    body.appendChild(p);
}

Answer 1

尝试将脚本标记移动到正文的末尾，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Oppgaver kap 11 - Itslearning</title>
  </head>
  <body>
    <button id="knapp">Trykk her</button>
    <!--<script type="text/javascript" src="sketch.js"></script>-->
    <script type="text/javascript" src="todimArray.js"></script>
  </body>
</html>

这样你的脚本在整个DOM Elements完成加载后加载（在你的情况下是knapp按钮）

2）你有错误的变量名称：

变化

p.innerHTML = setning;
body.appendChild(p);

到

pEl.innerHTML = setning;
bodyEl.appendChild(pEl);

Answer 2

您应该将HTML标记为：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Oppgaver kap 11 - Itslearning</title>
  </head>
  <body>
    <button id="knapp">Trykk her</button>

    <!--<script type="text/javascript" src="sketch.js"></script>-->
    <script type="text/javascript" src="todimArray.js"></script>
  </body>
</html>

如果可能的话，您应该始终在关闭正文标记之前链接您的JS文件，因为如果您在按钮之前链接脚本，脚本就不会知道该按钮。

如果您需要在HTML之前链接脚本，也可以在纯javascript中使用事件DOMContentLoaded或在jquery中使用$(document).ready()

Queryselector返回null，无法找出原因

2 个答案: