JavaScript Forum

**TCS** · 06-16-2009, 11:31 AM

I'm making a sorta hangman game to practice and learn javascript. There's no actual 'hangman' and you can guess as many times as you want. After you hit the 'guess a letter' button for the second time, it says there's an error on line 1, char 1, and it's expecting an object. In Firefox, it says 'ask' is not defined. getWord calls display, display calls ask, ask calls display when you hit a button, and it loops from there. Please help?

Code:

<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--


var word = new Array();
var see = new Array();
var guess = "";
var gotcha = "";
var x=0;

getWord();

//***************************************************************************************************************************
//***************************************************************************************************************************

function getWord()
{


    gotcha=prompt("Enter a lowercase word between 3 and 10 characters long","Enter word here");

    try
    {
        if (gotcha.length<3)
        {
            throw "Errshort";
        }
        if (gotcha.length>10)
        {
            throw "Errlong";
        }
        if (gotcha==null)
        {
            throw "Errword";
            }
    }
    catch(err)
    {
            if (err=="Errshort")
            {
            alert ("Word too short!");
            }
            if (err=="Errlong")
            {
                alert ("Word too long!");
            }
            if (err=="Errword")
            {
                   alert ("Well enter something!");
        }
    }

    for (x=0;x<11;x++)
    {
        if (gotcha.charAt(x) != null)
            {
                word[x] = gotcha.charAt(x);
            }
        
        see[x] = 0;
    }

        display();
}

//***************************************************************************************************************************
//***************************************************************************************************************************

function display()
{
    for(x=0;x<gotcha.length;x++)
        {
            if (see[x]==0)
                {
                    document.write("_ ");
                }
                else if (see[x]==1)
                {
                    document.write(word[x] + " ");
                }
                else
                {
                    document.print("Display Error: see[" + x + "] equals " + see[x]);
                }
        }
        document.write("<input type=\"button\" onclick=\"ask()\" value=\"Guess\">");
}

//***************************************************************************************************************************
//***************************************************************************************************************************

function ask()
{
    guess=prompt("Pick a lower case letter" , "");
        for(x=0;x<gotcha.length;x++)
        {
            if(word[x] == guess)
                {
                    see[x]=1;
                }
        }
        display();
}

//-->
</script>
<title>Untitled</title>
</head>
<body>



</body>
</html>

**tripy** · 06-16-2009, 12:23 PM

As much as you can, don't use document.write !

Your problem, is that document.write was outputting text before the <body> tag was reached.
The browser (at least firefox) was then thrown in quircks mode, and waiting on data after the first push of the button.

Rather than document.write, use a container, and append DOM elements in it.
I rewrote your script with pure DOM functions.
I've tested it in FF 3.5 and IE7, and its working in both yet.

And remember, JS is interpreted when it's seen by the browser, so, if you put this script before the <span> which will hold the script result, you'll have an error saying that the element was not found.

HTML Code:

<html>
<head>
<title>Untitled</title>
</head>
<body>

<span id="container"/>
<script language="JavaScript" type="text/javascript">
<!--
var word = new Array();
var see = new Array();
var guess = "";
var gotcha = "";
var x=0;

getWord();
//***************************************************************************************************************************
//***************************************************************************************************************************
function getWord(){
    gotcha=prompt("Enter a lowercase word between 3 and 10 characters long","Enter word here");
    try{
        if (gotcha.length<3){
            throw "Errshort";
            }
            if (gotcha.length>10){
                throw "Errlong";
            }
            if (gotcha==null){
                throw "Errword";
            }
    }
    catch(err){
        if (err=="Errshort"){
            alert ("Word too short!");
        }
        if (err=="Errlong"){
            alert ("Word too long!");
        }
        if (err=="Errword"){
            alert ("Well enter something!");
        }
    }

    for (x=0;x<11;x++){
        if (gotcha.charAt(x) != null){
            word[x] = gotcha.charAt(x);
        }
    see[x] = 0;
    }
    display();
}

//***************************************************************************************************************************
//***************************************************************************************************************************

function display(){
    trg=document.getElementById('container');
    trg.innerHTML=''
    for(x=0;x<gotcha.length;x++){
        if (see[x]==0){
            trg.appendChild(document.createTextNode('_ '));
        }
        else if (see[x]==1){
            trg.appendChild(document.createTextNode(word[x] + " "));
        }
        else{
            trg.appendChild(document.createTextNode("Display Error: see[" + x + "] equals " + see[x]));
        }
    }
}

//***************************************************************************************************************************
//***************************************************************************************************************************

function ask(){
    guess=prompt("Pick a lower case letter" , "");
    for(x=0;x<gotcha.length;x++){
        if(word[x] == guess){
            see[x]=1;
        }
    }
    display();
}

btn=document.createElement('input');
btn.type="button";
btn.value='Guess';
try{
    btn.addEventListener('click',ask,false);
}
catch(r){
    btn.attachEvent('onclick',ask)
}
document.getElementsByTagName('body')[0].appendChild(btn)
//-->
</script>
</body>
</html>

**TCS** · 06-16-2009, 05:41 PM

Thanks

I'm really new to javascript (I did study C and Java a few years ago, so that helped) and I don't know anything about the DOM stuff. I'll learn more about it, it looks a lot better.

**tripy** · 06-16-2009, 07:21 PM

You're welcome.

The best DOM reference I've found, is at mozilla.org:
https://developer.mozilla.org/en/Gecko_DOM_Reference

You should find everything you need from there.
Even indications when IE differs too much (like with the event listener).