Hi, so I'm creating a hangman game with only basic skills in java&html. I'm having a great trouble as to how to make it work. What I'm trying to do is very simple: When I type a word, a box will pop up and say, "----" (if it's 4 words) or "-----"(if it's 5 ) words) And Then if the word matches with what I typed, it will show "--d-" or something like that.

It obviously doesn't have advanced skills, and I can't use them at my level. So please correct where it's wrong.. Thanks.

<!Doctype html>
<html>
<head>

<h1> H A N G M A N </h1>
<img src="HangmanStep1.gif" id="hangman"> </img>

<script>
var secretword
var secretword=["horse","frogs","turtle","snail","chicken","turkey","bird","dorphin","lion","bear",
                          "cat","dog","spider"]
var click=0
var WrongGuess=""
var RightGuess=""
var numwrong=0
var numright=0
var guess=""
var n=0

function haha() {

        guess=document.getElementById("type").value
        n=secretword.search(guess) 

        if (n==-1){alert("Wrong!")
        numwrong=numwrong+1
        WrongGuess=WrongGuess+guess
        document.getElementById("text1").innerHTML=(WrongGuess)
                  }
        else {alert("That Guess Is right and is in the " + (n+1) + "space" ) 

             numright=numright+1
             RightGuess=RightGuess+guess
               document.getElementById("text2").innerHTML=(RightGuess)
              }

        alert("Your Guess is" + " " +(click++) + " " + "Times") 


        if (numwrong==1) {document.getElementById("hangman").src="HangmanStep2.gif"}
        if (numwrong==2) {document.getElementById("hangman").src="HangmanStep3.gif"}
        if (numwrong==3) {document.getElementById("hangman").src="HangmanStep4.gif"}
        if (numwrong==4) {document.getElementById("hangman").src="HangmanStep5.gif"}
        if (numwrong==5) {document.getElementById("hangman").src="HangmanStep6.gif"}
        if (numwrong==6) {document.getElementById("hangman").src="HangmanStep7.gif"}

}


function ChangeWords() {

        answer="----"
        n=secretword.search("r")
        alert(answer)
        answer=answer.substring(0,n) + "r" + answer.substring(n,answer.length)
        alert(answer)

}



</script>
</head>

<body>

<input type="text" id="type" />
<input type="button" value="Submit" onClick="haha()" onClick="ChangeWords()"/> 

<br> <br>
Wrong Letters <p id="text1"> ----- </p>
Right Letters <p id="text2"> ----- </p>
</body>
</html>

this will get you started and you can finish it off

<!Doctype html>
<html>
<head>
<h1> H A N G M A N </h1>
<img src="HangmanStep1.gif" id="hangman"> </img>
<script>

var secretword=["horse","frogs","turtle","snail","chicken","turkey","bird","dorphin","lion","bear","cat","dog","spider"];
var whichword = secretword[Math.floor((Math.random()*13)+1)];

var click=0;
var WrongGuess="";
var RightGuess="";
var numwrong=0;
var numright=0;
var guess="";
var n=0;
function haha() {
        guess=document.getElementById("guess").value;
        n=whichword.search(guess);
        if (n==-1)
        {
            alert("Wrong!");
            numwrong=numwrong+1;
            WrongGuess=WrongGuess+guess;
            document.getElementById("text1").innerHTML=(WrongGuess);
        }
        else {
            alert("That Guess Is right and is in the " + (n+1) + "space" ); 
            numright=numright+1;
            RightGuess=RightGuess+guess;
               document.getElementById("text2").innerHTML=(RightGuess);
        }
        alert("Your Guess is" + " " +(click++) + " " + "Times") ;
        if (numwrong==1) {document.getElementById("hangman").src="HangmanStep2.gif";}
        if (numwrong==2) {document.getElementById("hangman").src="HangmanStep3.gif";}
        if (numwrong==3) {document.getElementById("hangman").src="HangmanStep4.gif";}
        if (numwrong==4) {document.getElementById("hangman").src="HangmanStep5.gif";}
        if (numwrong==5) {document.getElementById("hangman").src="HangmanStep6.gif";}
        if (numwrong==6) {document.getElementById("hangman").src="HangmanStep7.gif";}
}
function ChangeWords() {
        answer="----";
        n=whichword.search("r");
        alert(answer);
        answer=answer.substring(0,n) + "r" + answer.substring(n,answer.length);
        alert(answer);
}
</script>
</head>
<body>
<input type="text" id="guess" />
<input type="button" value="Submit" onClick="haha()" onClick="ChangeWords()" /> 
<br> <br>
Wrong Letters <p id="text1"> ----- </p>
Right Letters <p id="text2"> ----- </p>
</body>
</html>

you will need to order the right guesses in the correct order and clear out the guess letter box after each attempt and a couple of other things but apart from that the basics are there

unless someone comes along in the meantime ill help out on sorting the correct letters and number of - later but basically it involves a small but of CSS and an inline list or at least that would be the way I do it but someone else might have a better way

ok here you go. There is still more to add but I am sure that you will now get the idea and be able to do all the little finishing bits like checking to see if the person wins or loses.

<!Doctype html>
<html>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>
<head>
<h1> H A N G M A N </h1>
<img src="HangmanStep1.gif" id="hangman"> </img>
<script>

var secretword=["horse","frogs","turtle","snail","chicken","turkey","bird","dorphin","lion","bear","cat","dog","spider"];
var whichword = secretword[Math.floor((Math.random()*secretword.length)+0)];
var click=0;
var WrongGuess="";
var RightGuess="";
var numwrong=0;
var numright=0;
var guess="";
var n=0;

function setupscreen(whichword)
{
    i=1;
    while(i<=whichword.length)
    {
        var ele = document.createElement("li");
        ele.id = i;
        var txt = document.createTextNode('_ ');
        ele.appendChild(txt);
        document.getElementById('right').appendChild(ele);
        i++
    }
}
function haha() {

        guess=document.getElementById("guess").value;
        n=whichword.search(guess);
        if (n==-1)
        {
            alert("Wrong!");
            numwrong=numwrong+1;
            WrongGuess=WrongGuess+guess;
            document.getElementById("text1").innerHTML=(WrongGuess);
        }
        else {
            alert("That Guess Is right and is in the " + (n+1) + "space" ); 
            numright=numright+1;
            RightGuess=RightGuess+guess;
               document.getElementById(n+1).innerHTML=(guess);
        }
        alert("Your Guess is" + " " +(click++) + " " + "Times") ;
        if (numwrong==1) {document.getElementById("hangman").src="HangmanStep2.gif";}
        if (numwrong==2) {document.getElementById("hangman").src="HangmanStep3.gif";}
        if (numwrong==3) {document.getElementById("hangman").src="HangmanStep4.gif";}
        if (numwrong==4) {document.getElementById("hangman").src="HangmanStep5.gif";}
        if (numwrong==5) {document.getElementById("hangman").src="HangmanStep6.gif";}
        if (numwrong==6) {document.getElementById("hangman").src="HangmanStep7.gif";}
}

</script>
</head>
<body <body onload="setupscreen(whichword)">>
<input type="text" id="guess" />
<input type="button" value="Submit" onClick="haha()" /> 
<br> <br>
Wrong Letters <p id="text1"> ----- </p>
<div>
Right Letters
<br>
<ul id="right">
</ul>
</div>
</body>
</html>

I'm pretty sure there are previous "help me with hangman" questions here on Daniweb. Try searching. I'm not suggesting you copy someone else' code but gleaning ideas is acceptable - even for homework IMHO!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.