Javascript 只能使用输入一次，然后它变为null_Javascript_Html

Javascript 只能使用输入一次，然后它变为null

javascript html

Javascript 只能使用输入一次，然后它变为null,javascript,html,Javascript,Html,我正在练习JavaScript，现在在打印方面遇到了问题。若我在输入框中写上“listaa”并按下Submit按钮，它会列出一些单词。然后我写了其他东西，再次尝试“listaa”，它不起作用。我尝试先用document.getElementById（“listaus”）.innerHTML=“”将其设为空白，但它不起作用控制台日志显示TypeError:document.getElementById（…）为null并告诉我它是第42行，如果您写“listaa”，第一个document.getE

我正在练习JavaScript，现在在打印方面遇到了问题。若我在输入框中写上“listaa”并按下Submit按钮，它会列出一些单词。然后我写了其他东西，再次尝试“listaa”，它不起作用。我尝试先用

document.getElementById（“listaus”）.innerHTML=“”

将其设为空白，但它不起作用

控制台日志显示

TypeError:document.getElementById（…）为null

并告诉我它是第42行，如果您写“listaa”，第一个document.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>"; 
        }
    }

}

document.getElementById（“kakki”）.value
console.log（kakki.value）
var musiiki=document.getElementById（“myAudio”）；
函数takki（）{
让current=“kakki”
var txt=“”
让数组=['Google'、'joku'、'asdasd'、'asdasd']
如果（kakki.value==“moi”）{
document.getElementById（“result1”）.innerHTML=kakki.value
document.getElementById（“result2”）.innerHTML=kakki.value
}
否则如果（kakki.value==“Pasi”）{
document.getElementById（“result1”）.innerHTML=“En tunne Pasia，mutta Matin tunnen。”
}
否则如果（kakki.value==“Matti”）{
控制台日志（“Matti ei ole Paikala”）
}
else if（kakki.value==“Reiska”）{
var i；
对于（i=1；i<101；i++）
log（“Reijo”+[i]）；
}
else if（kakki.value==“aloitamusiiki”）{
musiiki.play（）；
}
else if（kakki.value==“Lopetamusiiki”）{
暂停（）；
}
else if（kakki.value==“谷歌”）{
document.getElementById（“谷歌”）.innerHTML=“SiirrytänköGoogleen？”
document.getElementById（“谷歌”）.href=”https://www.w3schools.com";
document.getElementById（“google”）.target=“\u blank”；
}
else if（kakki.value==“listaa”）{
forEach（myFunction）；
document.getElementById（“listaus”）.innerHTML=“”
document.getElementById（“listaus”）.innerHTML=txt；
函数myFunction（值、索引、数组）{
txt=txt+value+“
”；
}
}
}

我认为这就是问题所在：

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

标记无效->谢谢。我删除了span id listaus并更改了

document.getElementById（“listaus”）.innerHTML=”“document.getElementById（“listaus”）.innerHTML=txt

document.getElementById（“result1”）.innerHTML=”“document.getElementById（“result1”）.innerHTML=txt并且它现在正在工作。