我正在练习JavaScript，现在打印时遇到了问题。如果我在输入字段中写"listaa"，然后按"提交"按钮，它会列出几个单词。然后我写了一些其他的东西，并再次尝试"listaa"，它不起作用。我试着先用document.getElementById("listaus").innerHTML = ""把它变成空白，但它不起作用。
Consolelog说TypeError: document.getElementById(...) is null，告诉我是第42行，如果你写"listaa"，第一个文档.getElementById在哪里。
我该如何解决这个问题？
我的HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Laskin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="/css/style.css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<audio id="myAudio">
<source src="americano.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div class="row">
<div>Nimesi: <input type="text" id="kakki" name="kakki"/></div>
<button onclick="takki()">Submit</button>
</div>
<br/>
<div class="tulostusdiv">
<span id="result1">
<span id="listaus">
</span>
</div>
<div class="tulostusdiv">
<span id="result2">
<a id="google" href=""></a>
</span>
</div>
</body>
<script type="text/javascript" src="js/laskimenskripti.js"></script>
</html>
和JavaScript
document.getElementById("kakki").value
console.log(kakki.value)
var musiikki = document.getElementById("myAudio");
function takki(){
let current ="kakki"
var txt = ""
let array = ['Google', 'joku', 'asdasd', 'asdasd']
if (kakki.value == "moi"){
document.getElementById("result1").innerHTML = kakki.value
document.getElementById("result2").innerHTML = kakki.value
}
else if(kakki.value == "Pasi"){
document.getElementById("result1").innerHTML = "En tunne Pasia, mutta Matin tunnen."
}
else if(kakki.value == "Matti"){
console.log("Matti ei ole paikalla")
}
else if(kakki.value == "Reiska"){
var i;
for (i = 1; i < 101; i++)
console.log("Reijo" + [i]);
}
else if(kakki.value == "aloitamusiikki"){
musiikki.play();
}
else if(kakki.value == "lopetamusiikki"){
musiikki.pause();
}
else if(kakki.value == "google"){
document.getElementById("google").innerHTML = "Siirrytäänkö Googleen?"
document.getElementById("google").href = "https://www.w3schools.com";
document.getElementById("google").target = "_blank";
}
else if(kakki.value == "listaa"){
array.forEach(myFunction);
document.getElementById("listaus").innerHTML = ""
document.getElementById("listaus").innerHTML = txt;
function myFunction(value, index, array) {
txt = txt + value + "<br>";
}
}
}
我想说这就是问题所在：
<span id="result1">
<span id="listaus">
您正在覆盖之前的#result1，因此之后就不存在#listaus了。
您伪造了一个结束标记
<span id="result1">
<span id="listaus">
</span>
尝试
<span id="result1">
</span>
<span id="listaus">
</span>
它不是逻辑
document.getElementById("kakki").value
从函数takki()中取出，因此将其插入到函数中
并检查标签的所有末端，如：
<span id="listaus">