0

Okay so I am a little baffled with this one, I'll show you the code first and then explain.

    var number = 1;
var maxguess = 6;
/*make the array of possible words*/
var arr = ["horse", "cow", "blueberry", "apples", "time", "hollow", "pumpkin", "telephone", "computer", "calculator", "tower", "castle"];
/*write shuffler code*/
function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex ;
    // While there remain elements to shuffle...
    while (0 !== currentIndex) {
        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }
  return array;
}
/*shuffle the array*/
shuffle(arr);
/*make the storage array for user entry*/
var gstore = [];
/*get the first entry in the array, make it a string, and remove any commas*/
var teme = arr.slice(0, 1).toString().replace(/,/g,'');

console.log(teme);

for (var i = 0; i <= 9; i++) {
    if (i > teme.length){
   document.getElementById(i).innerHTML="x";
   }
}

/*listen for button click*/
document.getElementById('sendIt').addEventListener('click', process);
/*function for 'process'*/
function process() {
    /*get the guess from the user*/
    var guess = document.getElementById('guess').value.toString().toLowerCase();
    /*check for any index of this guess*/
        if (gstore.indexOf(guess, 0) == -1){
            /*store this guess*/
            gstore.push(guess);
            /*make storage array for letter indicies*/
            var indices = [];
            /*find indicies of the guess*/
                for(var i=0; i<teme.length;i++) {
                    if (teme[i] === guess) {
                        document.getElementById(i).innerHTML = guess.toString();
                    }
                }
            number++;
        }
    if (gstore.indexOf(guess, 0) != -1){

    }
}

Alright, so this is a hangman game I am making in a class. Near the bottom of the JS you can see I wrote the following-

for(var i=0; i<teme.length;i++) {
                    if (teme[i] === guess) {
                        document.getElementById(i).innerHTML = guess.toString();
                    }
                }

Now, this gives me absolutely no errors in the JS console if I leave it as is. Now, i get an error when at the line saying 

document.getElementById(i).innerHTML="";

when I have it outside the button click function here

console.log(teme);

for (var i = 0; i <= 9; i++) {
    if (i > teme.length){
   document.getElementById(i).innerHTML="";
   }
}

To be specific, the error states

[Error] TypeError: null is not an object (evaluating 'document.getElementById(i).innerHTML=" "')
    global code (clar.js, line 31)

Now if this is throwing an error here, is it worth changing the code in this location or did I do something not good in both instances even though the second instance works?

All help is much appreciated, and my javascript teacher has no idea you can input a variable when writing

document.getElementById(variableName)

so he is literally of no help to me, and also i find it nice to be able to do something without a framework

edit: sorry, forgot the HTML, that should help clear the air as to what I am doing

<html>
<head>
</head>
<body>
    <input type="text" name="" value="" id="guess" /><br>
    <input type="button" name="" value="submit" id="sendIt" /><br />
    <script src="./clar.js" type="text/javascript"></script>
    <span id="0"></span><span id="1"></span><span id="2"></span><span id="3"></span><span id="4"></span><span id="5"></span><span id="6"></span><span id="7"></span><span id="8"></span><span id="9"></span>
</body>
</html>
is-cj
  • 3
  • 4
  • You shouldn't have more than one item with the same ID on a page. ID's are meant to be unique. I would instead give the items a specific class and then use `querySelector` – Andrew Koroluk Nov 12 '14 at 17:01
  • 2
    The error means that you are trying to find an element with an ID that doesn't exist. Not sure what you expect us to do? – Felix Kling Nov 12 '14 at 17:02
  • Can you give us your HTML? – shadowfox Nov 12 '14 at 17:03
  • I just posted it now, sorry about that – is-cj Nov 12 '14 at 17:06
  • Duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/q/14028959/218196) -- you are trying to access the elements before they exist. – Felix Kling Nov 12 '14 at 17:24
  • I edited it, no longer fits the duplicate claim, now its just an error that I don't understand @FelixKling – is-cj Nov 12 '14 at 17:27
  • You are including `` before the elements you are trying to reference. That's exactly what the other question is covering. Did you even bother to have a look at it? – Felix Kling Nov 12 '14 at 17:28
  • so sorry @FelixKling I wrote that and then went wait, I didn't do that, really sorry cause it did help – is-cj Nov 12 '14 at 17:33
  • No worries :) I guess misunderstood your previous comment, I thought you referred to your previous edits. Sorry if I sounded harsh. – Felix Kling Nov 12 '14 at 17:34

2 Answers2

0

Your second for loop is accessing an item out of bounds and the indexer is bringing back a null object.

Change from:

for (var i = 0; i <= teme.length; i++)

to:

for (var i = 0; i < teme.length; i++)
ryancdotnet
  • 2,015
  • 16
  • 33
0

Your error code would come from JavaScript not finding the html element within your document. 

document.getElementById(i).innerHTML = guess.toString();

Are you sure you have elements in your html with IDs that range from 0 to teme.length?

It might help if you add your html too!

Zeralore
  • 124
  • 13