PDA

View Full Version : comparing string value's



Kirl
Jun 10th, 2006, 01:06 AM
I want to compare two string value's with eachother and I want to make the differences appear in another color.

I have written this little javascript memory game (this one (http://www.kirl.nl/JSgame2.3.html?)) and if the user puts in a diffent number then he was shown I want to output the correct numbers with the diffrences in red.

Any ideas how I can achieve this?

Mr J
Jun 11th, 2006, 02:27 PM
Try something on these lines


<script type="text/javascript">

testValue="123"

function checkValue(){

userValue=document.f1.t1.value
document.getElementById("d1").innerHTML=""

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

if(userValue.charAt(i)!=testValue.charAt(i)){
document.getElementById("d1").innerHTML+="<span style=\"color:red\">"+userValue.charAt(i)+"</span>"
}
else{
document.getElementById("d1").innerHTML+=userValue.charAt(i)
}

}

}

</script>

<form name="f1">
<input type="text" name="t1">
<input type="button" value="Check Value" onclick="checkValue()">
</form>

<div id="d1">&nbsp;</div>

Kirl
Jun 11th, 2006, 11:17 PM
Thanks for the help, is it possible to have collored text in a form input field as well?

I can't get that to work.

coothead
Jun 11th, 2006, 11:39 PM
Hi there Kirl,

is it possible to have coloured text in a form input field as well?
If you are thinking of individual letters/numbers the answer is no.

So why don't you use a div for this purpose instead of an input?
As you are only going to display information an input would not be necessary. ;)

coothead

Mr J
Jun 11th, 2006, 11:52 PM
For this example I have just added the additional statements to your script to give you an idea.



<HTML>
<HEAD>
<TITLE>Script game</TITLE>

<SCRIPT type=text/javaScript>

var numbers = 1;// Growing number string to reproduce
var numbersLength = 1;// length of number string to begin with
var gamePoints = 1;// level nr

// Start game code (play game button)
function startGame(){
numbers = "";
// filling the array with random numbers
for ( i = 0; i < numbersLength; i++ )
numbers += [ Math.floor( Math.random() * 10) ];
myForm.output.value = "Repeat this number above: " + numbers;
}

// Main game code (check numbers button)
function checkNumbers(){

document.getElementById("output2").innerHTML="" // added
if(myForm.userInput.value==""){return} // added

// if the answer is the same as the number array
if ( myForm.userInput.value == numbers ) {
myForm.output.value = "Correct!";
gamePoints += 1;
myForm.points.value = "Level " + gamePoints;
numbersLength += 1;
numbers = "";
// re-filling the array with random numbers
for ( i = 0; i < numbersLength; i++ )
numbers += [ Math.floor( Math.random() * 10) ];
myForm.output.value = "Correct, now try these: " + numbers ;
document.getElementById("userInput").blur();
}
else{
myForm.output.value = numbers + " was the correct answer";
//window.alert( "Too bad, you reached level " + gamePoints + "\nTry again." );
myForm.points.value = "Level " + gamePoints;
myForm.nrCheck.value = "try again";

// ****** ADDED *********
for(var i=0;i<myForm.userInput.value.length;i++){

if(myForm.userInput.value.charAt(i)!=numbers.charAt(i)){
document.getElementById("output2").innerHTML+="<span style=\"color:red\">"+myForm.userInput.value.charAt(i)+"</span>"
}
else{
document.getElementById("output2").innerHTML+=numbers.charAt(i)
}

}

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

if ( gamePoints > 1 ){
gamePoints -= 1;
numbersLength -= 1;
myForm.points.value = "Level " + gamePoints;
}
// re-filling the array with random numbers
numbers = "";
for( i = 0; i < numbersLength; i++ ){
numbers += [ Math.floor( Math.random() * 10) ];
}

}

}


// clears both fields when the focus is put on the input field
function hideNumbers(){
myForm.output.value = "";
myForm.userInput.value = "";
}


// prevents players from copying the numbers
function cheat(){
window.alert( "You're not trying to copy anything are you?" );
myForm.output.value = "Cheater! You dropped a level.";
if ( gamePoints > 1 ){
gamePoints -= 1;
numbersLength -= 1;
myForm.points.value = "Level " + gamePoints;
}
myForm.nrCheck.value = "Try again";
}


// reset all values on refresh
function reset(){
numbers = "";
// filling the array with random numbers
for ( i = 0; i < numbersLength; i++ ) {
numbers += [ Math.floor( Math.random() * 10) ];
}
myForm.points.value = "Level " + gamePoints;
myForm.output.value = "Repeat this number above: " + numbers;
myForm.userInput.value = "";
}

</SCRIPT>

<META content="MSHTML 6.00.2900.2873" name=GENERATOR></HEAD>
<BODY onload=reset()>

comparing string value's
Kirl

coding forums
<TABLE width=270 align=center border=2>
<FORM name=myForm>
<TBODY>
<TR>
<TH colSpan=2>Random m3m0ry </TH>
<TR>
<TD colSpan=2>Simply repeat the numbers from the text field below in the text field above it and press 'check numbers'. </TD>
<TR>
<TR>
<TD align=left><!-- User input box --><INPUT id=userInput onfocus=hideNumbers() size=29> </TD>
<TD><!-- Level box --><INPUT id=points size=6 value="Level 1"> </TD></TR>
<TR>
<TD align=left colSpan=2><!-- Comment output box -->
<INPUT id=output onfocus=cheat() size=40 value="Press 'play game' to start">

<div id="output2">&nbsp;</div>

</TD></TR>
<TR>
<TD align=middle colSpan=2><!-- Play game button --><INPUT id=nrCheck onclick=startGame() type=button value="Play game">
<!-- Check numbers button --><INPUT onclick="checkNumbers(); return false;" type=submit value="Check numbers">
<BR></TD></TR></FORM></TBODY></TABLE>
<SCRIPT type=text/javascript>
// somehow firefox doesn't seem to work without this bit
var myForm = document.myForm;
</SCRIPT>
</BODY></HTML>