Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Aug 2014
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation how to replace an underscore with a user inputted letter??

    im building a sorta hangman game and im struggling. please help!, i need the program to replace an undescore with a user inputted letter! im struggling so bad . help please!!! heres the code:

    <script>

    var words = ["kite", "boom", "zoom", "tall", "table", "biscuit", "pie"];

    window.addEventListener("load", function() {

    var submitbtn = document.getElementById("button")
    var userInput = document.getElementById("userInput");

    submitbtn.addEventListener("click", checkAnswer, false);



    var wordElt = document.getElementById("word");
    var word = words[Math.floor(Math.random() * words.length)];

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

    //display += "_ ";
    wordElt.textContent += " _ ";
    }



    });

    function check(){

    }

    so all its meant to do:

    when the user writes a letter, and submits it, the program will check to see if the word contains that letter, if it does, the underscores will be replaced with that letter on the appropiate areas. please help

  • #2
    New Coder
    Join Date
    Aug 2014
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    help please!

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,307
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Don't bump your posts after less than an hour. We are not standing around 24/7 just to answer your questions.

    Is this homework? Have you tried Google? There are many Javascript hangman games to be found there.
    Last edited by Philip M; 08-12-2014 at 01:06 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    "kite", "boom", "zoom", "tall", "table", "biscuit", "pie"<br />
    <input id="button" type="button" name="" value="Start" onclick="Start();" />
    <input id="button" type="button" name="" value="Enter" onclick="checkAnswer();" />
    <input id="userInput" />
    <div id="word" ></div>
    <script>
    
    var words = ["kite", "boom", "zoom", "tall", "table", "biscuit", "pie"];
    
    
    var submitbtn = document.getElementById("button")
    var userInput = document.getElementById("userInput");
    var wordElt = document.getElementById("word");
    var find,found;
    
    
    
    function Start(){
     var word = words[Math.floor(Math.random() * words.length)];
     userInput.value=wordElt.innerHTML='';
     find=word.split('');
     found=[]
     for ( var i=0; i < word.length; i++ ) {
      found[i]=" _ "
     }
     wordElt.innerHTML = found.join('');
    }
    
    
    function check(){
    }
    
    function checkAnswer(){
     var l=userInput.value.charAt(0);
     if (l&&find){
      for (var z0=0;z0<find.length;z0++){
       if (find[z0]&&find[z0].toUpperCase()==l.toUpperCase()){
        found[z0]=' '+l+' ';
        find[z0]='';
        break;
       }
      }
      userInput.value='';
      wordElt.innerHTML=found.join('');
      if (find.join('').length==0){
       find=null;
       alert('correct');
      }
     }
    }
    
    </script>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New Coder
    Join Date
    Aug 2014
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    "kite", "boom", "zoom", "tall", "table", "biscuit", "pie"<br />
    <input id="button" type="button" name="" value="Start" onclick="Start();" />
    <input id="button" type="button" name="" value="Enter" onclick="checkAnswer();" />
    <input id="userInput" />
    <div id="word" ></div>
    <script>
    
    var words = ["kite", "boom", "zoom", "tall", "table", "biscuit", "pie"];
    
    
    var submitbtn = document.getElementById("button")
    var userInput = document.getElementById("userInput");
    var wordElt = document.getElementById("word");
    var find,found;
    
    
    
    function Start(){
     var word = words[Math.floor(Math.random() * words.length)];
     userInput.value=wordElt.innerHTML='';
     find=word.split('');
     found=[]
     for ( var i=0; i < word.length; i++ ) {
      found[i]=" _ "
     }
     wordElt.innerHTML = found.join('');
    }
    
    
    function check(){
    }
    
    function checkAnswer(){
     var l=userInput.value.charAt(0);
     if (l&&find){
      for (var z0=0;z0<find.length;z0++){
       if (find[z0]&&find[z0].toUpperCase()==l.toUpperCase()){
        found[z0]=' '+l+' ';
        find[z0]='';
        break;
       }
      }
      userInput.value='';
      wordElt.innerHTML=found.join('');
      if (find.join('').length==0){
       find=null;
       alert('correct');
      }
     }
    }
    
    </script>
    
    </body>
    
    </html>
    Thank you so much man ! you saved me alot of time !


    if you could somehow help me byu explaining what you did to the code through teamviewer or something so i can understand better i would be so greatful too


    one thing that i wanted the code to do is when i have - When I have a word like tree, and someone inputs it, it should replace the last two underscores with e’s. dnt mean to be picky, I still thankful 

  • #6
    New Coder
    Join Date
    Aug 2014
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    also, i dont understand what you did with this userinput=wordElt. i tried just substituting wordelt for userinput, then it didnt work properly!, Can you please comment it?

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    "kite", "boom", "zoom", "tall", "table", "biscuit", "pie"<br />
    <input id="button" type="button" name="" value="Start" onclick="Start();" />
    <input id="button" type="button" name="" value="Enter" onclick="checkAnswer();" />
    <input id="userInput" />
    <div id="word" ></div>
    <script>
    
    var words = ["kite", "boom", "zoom", "tall", "table", "biscuit", "pie"];
    
    
    var submitbtn = document.getElementById("button");    // the letter input button object
    var userInput = document.getElementById("userInput"); // the letter input text box object
    var wordElt = document.getElementById("word");        // the word display object
    var find;                                             // an array of the letters to find
    var found;                                            // an array of the letters to display in the word display object
    
    
    
    function Start(){
     var word = words[Math.floor(Math.random() * words.length)]; // select the word from the word array
     userInput.value=''; // reset the the letter input text box object
     find=word.split('');  // populate the find array with the word letters
     found=[];
     for ( var i=0; i < word.length; i++ ) {
      found[i]=" _ ";  // load the find array fields
     }
     wordElt.innerHTML = found.join(''); // display the found array as a string
    }
    
    function checkAnswer(){
     var l=userInput.value.charAt(0); // use the first letter of the letter input text box object
     if (l&&find){
      for (var z0=0;z0<find.length;z0++){  // loop through thr find array
       if (find[z0]&&find[z0].toUpperCase()==l.toUpperCase()){  // if a match with the input letter
        found[z0]=' '+l+' ';  // change the found array field to the input letter
        find[z0]='';          // clear the find array field
        break;                // stop checking for more than 1 match
       }
      }
      userInput.value='';    // reset the letter input text box object
      wordElt.innerHTML=found.join('');  // display the found array as a string
      if (find.join('').length==0){      // all find fields contain ''
       find=null;                        // do not look for more matches
       alert('correct');
      }
     }
    }
    
    </script>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #8
    New Coder
    Join Date
    Aug 2014
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    "kite", "boom", "zoom", "tall", "table", "biscuit", "pie"<br />
    <input id="button" type="button" name="" value="Start" onclick="Start();" />
    <input id="button" type="button" name="" value="Enter" onclick="checkAnswer();" />
    <input id="userInput" />
    <div id="word" ></div>
    <script>
    
    var words = ["kite", "boom", "zoom", "tall", "table", "biscuit", "pie"];
    
    
    var submitbtn = document.getElementById("button");    // the letter input button object
    var userInput = document.getElementById("userInput"); // the letter input text box object
    var wordElt = document.getElementById("word");        // the word display object
    var find;                                             // an array of the letters to find
    var found;                                            // an array of the letters to display in the word display object
    
    
    
    function Start(){
     var word = words[Math.floor(Math.random() * words.length)]; // select the word from the word array
     userInput.value=''; // reset the the letter input text box object
     find=word.split('');  // populate the find array with the word letters
     found=[];
     for ( var i=0; i < word.length; i++ ) {
      found[i]=" _ ";  // load the find array fields
     }
     wordElt.innerHTML = found.join(''); // display the found array as a string
    }
    
    function checkAnswer(){
     var l=userInput.value.charAt(0); // use the first letter of the letter input text box object
     if (l&&find){
      for (var z0=0;z0<find.length;z0++){  // loop through thr find array
       if (find[z0]&&find[z0].toUpperCase()==l.toUpperCase()){  // if a match with the input letter
        found[z0]=' '+l+' ';  // change the found array field to the input letter
        find[z0]='';          // clear the find array field
        break;                // stop checking for more than 1 match
       }
      }
      userInput.value='';    // reset the letter input text box object
      wordElt.innerHTML=found.join('');  // display the found array as a string
      if (find.join('').length==0){      // all find fields contain ''
       find=null;                        // do not look for more matches
       alert('correct');
      }
     }
    }
    
    </script>
    
    </body>
    
    </html>
    thank you so much man! i owe you alot. thanks so much for commenting!

    words with two of the same letters still dont work properly, but its ok. im still so thankful!

    greatly appreciated!

  • #9
    New Coder
    Join Date
    Aug 2014
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by brogmiss2 View Post
    thank you so much man! i owe you alot. thanks so much for commenting!

    words with two of the same letters still dont work properly, but its ok. im still so thankful!

    greatly appreciated!
    lol, i feel stupid !!!!! haha i figured it out, i just removed the break method at the end of the checkanswer()function loop! . time to finish the rest of the game ! haha :P.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Quote Originally Posted by brogmiss2 View Post
    also, i dont understand what you did with this userinput=wordElt. i tried just substituting wordelt for userinput, then it didnt work properly!, Can you please comment it?
    What are you talking about?
    Last edited by Old Pedant; 08-16-2014 at 11:36 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    Quote Originally Posted by Old Pedant View Post
    What are you talking about?
    In Post #4 start() contained the line
    Code:
     userInput.value=wordElt.innerHTML='';
    The line does not exist in #7 where he explains it ?!?

  • #12
    New Coder
    Join Date
    Aug 2014
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    how would i add a counter? for when the user gets like upto 6 letters wrong, the game ends?

  • #13
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    "kite", "boom", "zoom", "tall", "table", "biscuit", "pie"<br />
    <input id="button" type="button" name="" value="Start" onclick="Start(6);" />
    <input id="button" type="button" name="" value="Enter" onclick="checkAnswer();" />
    <input id="userInput" />
    <div id="word" ></div>
    <div id="count" ></div>
    <script>
    
    var words = ["kite", "boom", "zoom", "tall", "table", "biscuit", "pie"];
    
    
    var submitbtn = document.getElementById("button");    // the letter input button object
    var userInput = document.getElementById("userInput"); // the letter input text box object
    var wordElt = document.getElementById("word");        // the word display object
    var Count = document.getElementById("count");        // the try count object
    var find;                                             // an array of the letters to find
    var found;                                            // an array of the letters to display in the word display object
    
    
    
    function Start(m){
     var word = words[Math.floor(Math.random() * words.length)]; // select the word from the word array
     Start.m=typeof(m)=='number'&&m>0?m:10;                      // set the maximum tries (using a property of function Start)
     Start.n=0;                                                  // the tries counter
     userInput.value=''; // reset the the letter input text box object
     find=word.split('');  // populate the find array with the word letters
     found=[];
     for ( var i=0; i < word.length; i++ ) {
      found[i]=" _ ";  // load the find array fields
     }
     wordElt.innerHTML = found.join(''); // display the found array as a string
     Count?Count.innerHTML=0:null;
    }
    
    function checkAnswer(){
     var l=userInput.value.charAt(0); // use the first letter of the letter input text box object
     if (l&&find){
     Start.n++; // increment the tries counter
      if (Count&&Start.n>Start.m){  // number of tries  > maximum
       Start.n++;    // increment the number of tries
       alert('You have more than '+ Start.m+' tries');
       return;      // do not continue
      }
      for (var z0=0;z0<find.length;z0++){  // loop through thr find array
       if (find[z0]&&find[z0].toUpperCase()==l.toUpperCase()){  // if a match with the input letter
        found[z0]=' '+l+' ';  // change the found array field to the input letter
        find[z0]='';          // clear the find array field
        break;                // stop checking for more than 1 match
       }
      }
      userInput.value='';    // reset the letter input text box object
      wordElt.innerHTML=found.join('');  // display the found array as a string
      Count?Count.innerHTML=Start.n:null;
      if (find.join('').length==0){      // all find fields contain ''
       find=null;                        // do not look for more matches
       alert('correct');
      }
     }
    }
    
    </script>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    brogmiss2 (08-21-2014)

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Quote Originally Posted by Lerura View Post
    In Post #4 start() contained the line
    Code:
     userInput.value=wordElt.innerHTML='';
    The line does not exist in #7 where he explains it ?!?
    That code first assigns the value '' (the blank string) to wordElt.innerHTML.

    It then assigns the value of wordElt.innerHTML to userInput.value.

    Unless you have a REALLY good JavaScript native code optimizer, you will likely see better performance by using two statements:
    Code:
    wordElt.innerHTML = '';
    userInput.value = '';
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •