Hello Please find bellow the code that i use to make a MasterMind like game.
For now people can see the PC selection so i can check if my algorith works.
Further more colors are only as visual part and don't have any functionality in the code.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<style>
</style>
</head>
<body>
<div id="firstcolor" name="firstcolor">
<script>
var x1 = Math.floor((Math.random()*4)+1); // here PC selects the first random number (color)
document.write(x1);
if(x1==1){
$("#firstcolor").css({'background-color': 'red'});
}
else if (x1==2){
$("#firstcolor").css({'background-color': 'yellow'});
}
else if (x1==3){
$("#firstcolor").css({'background-color': 'blue'});
}
else if (x1==4){
$("#firstcolor").css({'background-color': 'green'});
}
</script>
</div>
<div id="secondcolor">
<script>
var x2 = Math.floor((Math.random()*4)+1);  // here PC selects the second random number (color)
document.write(x2);
if(x2==1){
$("#secondcolor").css({'background-color': 'red'});
}
else if (x2==2){
$("#secondcolor").css({'background-color': 'yellow'});
}
else if (x2==3){
$("#secondcolor").css({'background-color': 'blue'});
}
else if (x2==4){
$("#secondcolor").css({'background-color': 'green'});
}
</script>
</div>
<div id="thirdcolor">
<script>
var x3 = Math.floor((Math.random()*4)+1);  // here PC selects the third random number (color)
document.write(x3);
if(x3==1){
$("#thirdcolor").css({'background-color': 'red'});
}
else if (x3==2){
$("#thirdcolor").css({'background-color': 'yellow'});
}
else if (x3==3){
$("#thirdcolor").css({'background-color': 'blue'});
}
else if (x3==4){
$("#thirdcolor").css({'background-color': 'green'});
}
</script>
</div>
<div id="fourthcolor">
<script>
var x4 = Math.floor((Math.random()*4)+1);  // here PC selects the fourth random number (color)
document.write(x4);
if(x4==1){
$("#fourthcolor").css({'background-color': 'red'});
}
else if (x4==2){
$("#fourthcolor").css({'background-color': 'yellow'});
}
else if (x4==3){
$("#fourthcolor").css({'background-color': 'blue'});
}
else if (x4==4){
$("#fourthcolor").css({'background-color': 'green'});
}
</script>
</div>
<form name="myForm" action="" method="post" onsubmit="return false">
<select id="firstselection" name="first" onchange="saveSelections(this)">
  <option >Choose</option>
  <option >1</option>
  <option >2</option>
  <option >3</option>
  <option >4</option>
  </select>
<select id="secondselection" name="second" onchange="saveSelections(this)">
  <option >Choose</option>
  <option >1</option>
  <option >2</option>
  <option >3</option>
  <option >4</option>
</select>
<select id="thirdselection" name="third" onchange="saveSelections(this)">
  <option >Choose</option>
  <option >1</option>
  <option >2</option>
  <option >3</option>
  <option >4</option>
</select>
<select id="fourthselection" name="forth" onchange="saveSelections(this)">
  <option >Choose</option>
  <option >1</option>
  <option >2</option>
  <option >3</option>
  <option >4</option>
</select>
<button onclick="showSelections()">Show choices</button>
</form>
<script>
var choices = []; // in this array i save the options that the player choosed from the drop down lists
function saveSelections(info) { // that's the function that stores the options that the player did did
 if (info.value != '') {
   choices.push(info.options[info.selectedIndex].text);
 }
}
function showSelections(){
var matched =[]; // In this array i store the selections of the player that are correct numbers (colors) and are in the correct positions.
var colors = [x1,x2,x3,x4]; // In this array i store the random number (color) selections that the PC did.
var a=0; // Variable "a" is a variable that counts how many numbers are correct but in the wrong place.
for (var i=0 ; i < choices.length ; i++) // with this for loop i check "choices array" with "colors array" position by position 
if (choices[i] == colors[i]){ // and if their value match 
matched.push(choices[i]); // i populate the "matched array" with this value otherwise i populate the matched array with the value "zero"
choices[i]=0 // Also i change the value of "color and choices array" to zero for these positions so i know and won't check these positions again.
colors[i]=0} //
else if (choices[i] != colors[i]){ // here as i said if the values of "choices array" and "colors array" don't match i put a value "zero" in this position
matched.push(0);} // by doing this i can count later on how many values in this array are NOT "zero" and get the number of correct number (colors) in the correct position.
for ( var j=0 ; j<choices.length ; j++) // !! HERE IS WHERE THE PROBLEMS BEGINS!!! with this for loop i can check which selected number (colors) are correct but in the wrong place
if ((choices[j] != 0) && (colors.indexOf(choices[j]) != -1)){ // if this position has NOT value "zero AND the value of choices is contained in the colors array
var a =a+1; // THEN the variable "a" is increased by +1
colors[colors.indexOf(choices[j])]=0;} // and the position that was found in "colors array" is getting value "zero" so i won't count this position again.
alert("matched "+matched); // pop ups an alert with the "matched array"
alert("variable a "+a); // pop ups an alert with the count of "a" variable
};
</script>
 </body>
</html>
My main problem is that my algorith populates the matched array correctly but when it's time to count variable "a" it always brings me "zero"

I have tried to explain with details what every part of my code does but if you have further questions please don't hesitate to post.

Thanks in advance for your help!