husslela03 Posted April 20, 2010 Share Posted April 20, 2010 i have a function where I would like to compare two strings depending on the position of each letter I need to format each letter differently... if the letter is in the right place print it Red if the letter is in the word, but in the wrong place, print it in blue if it's not part of the word at all, make it black how would i do that with the function makeAGuess() below? Also, the printout needs to go in the "guessed" text box which i know i use document.myForm.guessed.value=... function makeAGuess() { var myInput=document.myLingo.input.value; document.myLingo.input.focus(); var cc= " "; if (!document.myLingo.input.value) { alert("Guess a letter.") } else { for(i=0; i<myInput.length; i++) { if(myInput.charAt(i)==theWord.charAt(i)) { document.myLingo.guessed.value=myInput.charAt(i).toUpperCase(); } else document.myLingo.guessed.value=myInput.charAt(i); } } } </script> </head> <body> <form name="myLingo"> <center> <table> <tr> <td> Lingo </td> </tr> <tr> <td align="right"> Get a New Word </td> <td align="left"> <input type="button" name="start" value="New Word" onclick="newGame()" /> </td> </tr> <tr> <td colspan=2 align="center"> <input type="text" name="toGuess" readOnly /> </td> </tr> <tr> <td colspan=2 align="center"> <input type="text" name="guessed" size="43" readonly> </td> </tr> <tr> <td colspan=2 align="center"> <input type="text" name="input" size=35> </td> </tr> <tr> <td colspan=2 align="center"> <input type="button" value="Make Guess" onclick="makeAGuess();"/> </td> </tr> <tr> <td align="right">Guess Count</td> <td align="left"> <input type="text" name="counter" value="" size=2 maxlength=2 disabled> </td> </tr> </table> </center> </form> </body> </html> Any help would be appreciated... Quote Link to comment Share on other sites More sharing options...
Psycho Posted April 20, 2010 Share Posted April 20, 2010 You can't populate different colored text into a form field. It all has to be the same color. You will need to use a DIV (or something comparable). I didn't even look at your function as it wasn't making sense. Here are a couple of functions that takes two words (the target and the guess) and returns a string that is formatted to display in the format you asked. you can figure out how to implement it. <html> <head> <script type="text/javascript"> function compareGuess(targetID, guessID) { var target = document.getElementById(targetID).value; var guess = document.getElementById(guessID).value; document.getElementById('result').innerHTML = guessResult(target, guess); return; } function guessResult(target, guess) { var letterLen = Math.min(target.length, guess.length); var guessAry = guess.split(''); var targetAry = target.split(''); //Find all letter/place matches for(var i=0; i<letterLen; i++) { if(guessAry[i].toLowerCase()==targetAry[i].toLowerCase()) { guessAry[i] = '<span style="color:green;">' + guessAry[i] + '</span>'; targetAry[i] = ''; } } //Letters left in target that were not exact matches var remainder = targetAry.join('').toLowerCase(); //Find remaining letter only matches for(var i=0; i<guess.length; i++) { if(guessAry[i].length==1 && remainder.indexOf(guessAry[i].toLowerCase())!=-1) { position = remainder.indexOf(guessAry[i]); guessAry[i] = '<span style="color:blue;">' + guessAry[i] + '</span>'; remainder = remainder.substr(0, position) + remainder.substr(position+1); } } return guessAry.join(''); } </script> </head> <body> Target Word: <input type="text" id="target" /><br /> Guess: <input type="text" id="guess" /><br /> <button onclick="compareGuess('target', 'guess');" />Test</button><br /> <div id="result" style="letter-spacing:6px"></div><br /> </body> </html> EDIT: fixed one bug for handling case insensitive handling. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.