Mr.Dude __ Mr.Dude __ - 3 months ago 9
Javascript Question

Defined variable results in null

I've been trying to code something, but it isn't working:

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


I'm very sorry for the clustertruck, but I'm quite new to HTML and Javascript.
The "translation" variable keeps outputting null even though I defined it the line before.

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

Answer

The "translation" variable keeps outputting null even though I defined it the line before.

Its not the translation variable that is null, its the call to document.getElementById("Translation" + Counter1plus1) which returns null.

There is no elements on your page which follow the pattern Translation1...Translation2....Translation[n].

Perhaps you meant to fill the Answer[n] elements

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

As an asside from your question, you have a simple HTML error too - </br> should simply be <br>.