Question

我一直试图编写代码，但它不起作用：

<html>
<head>
<style>

.borderAroundNumber{
border-style: inset;
margin-left: 40%;
margin-right: 40%;
text-align: center;}    

</style>
</head>
<body>

<h1>Testing Thing</h1>

<button onclick="WhatIsTheWord()">Click here</button>
<button onclick="CheckTranslations()">Check</button>
</br>
</br>
<div class="borderAroundNumber">
<p1 id="AOS" class="numberOfSentencesStyle"></p1>
</div>

</br>
<p1 id="Word1"></p1>
<p1 id="Spacing1"></p1>
<p1 id="Answer1"></p1>
<p1 id="IsCorrectOrNot1"></p1>
</br>
<p1 id="Word2"></p1>
<p1 id="Spacing2"></p1>
<p1 id="Answer2"></p1>
<p1 id="IsCorrectOrNot2"></p1>
</br>
<p1 id="Word3"></p1>
<p1 id="Spacing3"></p1>
<p1 id="Answer3"></p1>
<p1 id="IsCorrectOrNot3"></p1>
</br>
<p1 id="Word4"></p1>
<p1 id="Spacing4"></p1>
<p1 id="Answer4"></p1>
<p1 id="IsCorrectOrNot4"></p1>
</br>
<p1 id="Word5"></p1>
<p1 id="Spacing5"></p1>
<p1 id="Answer5"></p1>
<p1 id="IsCorrectOrNot5"></p1>
</br>
<p1 id="Word6"></p1>
<p1 id="Spacing6"></p1>
<p1 id="Answer6"></p1>
<p1 id="IsCorrectOrNot6"></p1>
</br>
<p1 id="Word7"></p1>
<p1 id="Spacing7"></p1>
<p1 id="Answer7"></p1>
<p1 id="IsCorrectOrNot7"></p1>

<script>

var Counter1 = 0;
var Counter2 = 0;
var IsCorrect =0;
var AmountOfSentences = prompt("What is the amount of sentences?");

function WhatIsTheWord(){

document.getElementById("AOS").innerHTML = AmountOfSentences;

while(Counter1 < AmountOfSentences){

    var Counter1plus1 = Counter1 + 1;
    var word = prompt("What is word "+ Counter1plus1);
    document.getElementById("Word" + Counter1plus1).innerHTML = word;
    document.getElementById("Spacing" + Counter1plus1).innerHTML = "   =   ";
    var translation = prompt("What is the translation of " + word);
    document.getElementById("Translation" + Counter1plus1).innerHTML = translation;              <---
    Counter1++;

}
}

function CheckTranslations(){

while(Counter2 < AmountOfSentences){

    var Counter2plus1 = Counter2 + 1;
    var Answer = prompt("What is the translation of " + document.getElementById("Word" + Counter2plus1).innerHTML);
    document.getElementById("Answer" + Counter2plus1).innerHTML = Answer;

    if(document.getElementById("Answer" + Counter2plus1).innerHTML == document.getElementById("Translation" + Counter2plus1)){

        document.getElementById("IsCorrectOrNot" + Counter2plus1).innerHTML = "is correct"; 
    }
    else{
        document.getElementById("IsCorrectOrNot" + Counter2plus1).innerHTML = "is wrong";
    }
    Counter2++;
}
}

</script>

</body>
</html>

对于clustertruck，我感到非常抱歉，但我对HTML和Javascript很陌生。＆＃34;翻译＆＃34;变量保持输出null，即使我之前定义了它。

    var translation = prompt("What is the translation of " + word);
    document.getElementById("Translation" + Counter1plus1).innerHTML = translation;

Answer 1

＆＃34;翻译＆＃34;变量保持输出null，即使我之前定义了它。

它不是translation变量为null，而是对document.getElementById("Translation" + Counter1plus1)的调用返回null。

网页上没有符合Translation1 ... Translation2 .... Translation[n]模式的元素。

也许您打算填充Answer[n]元素

var translation = prompt("What is the translation of " + word);
document.getElementById("Answer" + Counter1plus1).innerHTML = translation;

除了您的问题之外，您还有一个简单的HTML错误 - </br>应该只是<br>。

Answer 2

您的错误消息是

“未捕获的TypeError：无法设置null的属性'innerHTML'，

HTML标记中没有id为"Translation1"的元素。

定义的变量结果为null

2 个答案: