CODEWITHSUNDEEP
javascripthtml
Mr.Dude __
Mr.Dude __

Reputation: 37

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;

Upvotes: 1

Views: 58

Answers (2)

Jamiec
Jamiec

Reputation: 136104

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 aside from your question, you have a simple HTML error too - </br> should simply be <br>.

Upvotes: 1

epascarello
epascarello

Reputation: 207501

The error message you have is

"Uncaught TypeError: Cannot set property 'innerHTML' of null",

There is no element with the id of "Translation1" in your HTML markup.

Upvotes: 0

Related Questions