PDA

View Full Version : Javascript HELP

sufc_tom
03-04-2008, 00:22
Why won't this script work? I want the guess column to reflect the choice column by inserting a corresponding coloured gif image into the guess column.

eg.


User choices a colour *choice1*
Guess Column *guess1* populates accordingly (e.g. yellow.gif)


Help :mad:

<script type="text/javascript">

document.bgColor="red";

var code = new Array ();
code[0] = "red";
code[1] = "green";
code[2] = "blue";
code[3] = "yellow";

var choice = new Array ();

choice[0] = "brown";
choice[1] = "blue";
choice[2] = "green";
choice[3] = "pink";
choice[4] = "red";
choice[5] = "yellow";

var guess = new Array();


//phase3 - compare codes

white=0;
red=0;

for (i=0;i<=3;i++)
{
for (j=0;j<=3;j++)
{
if (guess[j] == code[i]) { white++; }
}

}

for (i=0;i<=3;i++)
{
if (guess[i] == code[i])
{ red++;white--; }
}

//alert(white+" pegs are the correct colour but in the wrong place. "+red+" pegs are the correct colour and in the correct place.");

function attempt() {
guess[0]= document.getElementById["choice0"].options[document.getElementById["choice0"].selectedIndex].value;
guess[1]= document.getElementById["choice1"].options[document.getElementById["choice1"].selectedIndex].value;
guess[2]= document.getElementById["choice2"].options[document.getElementById["choice2"].selectedIndex].value;
guess[3]= document.getElementById["choice3"].options[document.getElementById["choice3"].selectedIndex].value;

img0 = "/images"+col[guess[0]]+".gif"; document.getElementById("blank1").src=img0;
img1 = "/images"+col[guess[1]]+".gif"; document.getElementById("blank2").src=img1;
img2 = "/images"+col[guess[2]]+".gif"; document.getElementById("blank3").src=img2;
img3 = "/images"+col[guess[3]]+".gif"; document.getElementById("blank4").src=img3;
}

</script>

<style type="text/css">
table.table1 {margin-left:100px; position: absolute; border: medium single; font-family: arial}
</style>
</head>
<body style="color: white; font-family: arial;">
<script type="text/javascript">
document.bgColor="black";
</script>
<table class="table1" summary="Mastermind Board" border="2">
<caption><strong><h3>Mastermind<h3></strong></caption>
<tr>
<th class="Guess"><form id="guess0" method="post" action="">
</th>

<th class="Guess"><form id="guess1" method="post" action="">
</th>

<th class="Guess"><form id="guess2" method="post" action="">
</th>

<th class="Guess"><form id="guess3" method="post" action="">
</th>

<th>
<form method="post" action="">
<input type="submit" value="Submit" onclick="attempt()"/>
</form>
</th>

<th colspan=4>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>

</tr>

<tr>

<th>
<select id="choice0">
<option value="0">brown</option>
<option value="1">blue</option>
<option value="2">green</option>
<option value="3">pink</option>
<option value="4">red</option>
<option value="5">yellow</option>
</select>
</form>
</th>

<th>
<select id="choice1">
<option value="0">brown</option>
<option value="1">blue</option>
<option value="2">green</option>
<option value="3">pink</option>
<option value="4">red</option>
<option value="5">yellow</option>
</select>
</form>
</th>

<th>
<select id="choice2">
<option value="0">brown</option>
<option value="1">blue</option>
<option value="2">green</option>
<option value="3">pink</option>
<option value="4">red</option>
<option value="5">yellow</option>
</select>
</form>
</th>

<th>
<select id="choice3">
<option value="0">brown</option>
<option value="1">blue</option>
<option value="2">green</option>
<option value="3">pink</option>
<option value="4">red</option>
<option value="5">yellow</option>
</select>
</th>

<th>
<form method="post" action="">
<input type="reset" value="Start Again!" onclick="attempt()"/>
</form>
</th>

<tr>

<th colspan=20> Good Luck!</th>
</tr>

</table>

</body>
</html>
John
03-04-2008, 01:45
<script type="text/javascript">
Array.prototype.swap = function(a, b)
{
var tmp = this[a];
this[a] = this[b];
this[b] = tmp;
}

var code = new Array();
var choice = new Array ("brown", "blue", "green", "pink", "red", "yellow");

var guess = new Array();
var noOfPegs = 4;

function newGame()
{
code = new Array();

var choiceMax = choice.length;
var rnd = new Array();

for (var i = 0; i < choiceMax; i++)
rnd[i] = i;

for (var i = 0; i < 100; i++)
rnd.swap(Math.floor(Math.random() * choiceMax), Math.floor(Math.random() * choiceMax));

for (var i = 0; i < noOfPegs; i++)
{
code[i] = choice[rnd[i]];
document.getElementById("choice" + i).selectedIndex = 0;
}

var obj = document.getElementById("guessRecordContainer");
if (obj)
obj.innerHTML = "";

alert("Hint: correct answer is "+code[0]+","+code[1]+","+code[2]+","+code[3]);
}


function attempt()
{
var white = 0;
var red = 0;

var guessHTML = "";

for (var i = 0; i < noOfPegs; i++)
{
var thisGuess = choice[document.getElementById("choice" + i).selectedIndex];
guessHTML += "<img src='/images" + thisGuess + ".gif' alt='"+thisGuess+"' />&nbsp;";

if (thisGuess == code[i])
red++;

for (j = 0; j <= noOfPegs; j++)
if (thisGuess == code[j] && j != i)
white++;
}
guessHTML += white + " pegs are the correct colour but in the wrong place. " + red + " pegs are the correct colour and in the correct place.<br/>";

var result = document.getElementById("guessRecordContainer");
var thisAttempt = document.createElement('div');

thisAttempt.innerHTML = guessHTML;

result.appendChild(thisAttempt);
}

newGame();

</script>

<style type="text/css">
table.table1 {margin-left:100px; border: medium single; font-family: arial}
</style>
</head>
<body style="color: white; font-family: arial;background:black">

<table class="table1" summary="Mastermind Board" border="2">
<tr>
<td colspan="4">
<caption><strong><h3>Mastermind<h3></strong></caption>
</td>
</tr>

<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>

<tr>
<td>
<select id="choice0">
<option value="0">brown</option>
<option value="1">blue</option>
<option value="2">green</option>
<option value="3">pink</option>
<option value="4">red</option>
<option value="5">yellow</option>
</select>
</td>
<td>
<select id="choice1">
<option value="0">brown</option>
<option value="1">blue</option>
<option value="2">green</option>
<option value="3">pink</option>
<option value="4">red</option>
<option value="5">yellow</option>
</select>
</td>
<td>
<select id="choice2">
<option value="0">brown</option>
<option value="1">blue</option>
<option value="2">green</option>
<option value="3">pink</option>
<option value="4">red</option>
<option value="5">yellow</option>
</select>
</td>
<td>
<select id="choice3">
<option value="0">brown</option>
<option value="1">blue</option>
<option value="2">green</option>
<option value="3">pink</option>
<option value="4">red</option>
<option value="5">yellow</option>
</select>
</td>
</tr>
</table>

<input type="submit" value="Check" onclick="attempt(); return false"/>
<input type="reset" value="Start Again!" onclick="newGame();return false"/>

Good Luck!

<div id="guessRecordContainer"></div>

</body>
</html>
John
03-04-2008, 01:56
There was too much wrong with the original code.

Malformed tables.
Nested Forms which is illegal as far as I am aware.
Your checking code to see if the answer was correct wasn't in a function
There were references to HTML objects that don't exists.
bgColor is Deprecated, use background instead.
submit button actually submitted the form, you need to put in return false; to prevent the submit taking place.
Try and put var in all variable unless you intend to reference it globally. You are looking for trouble if you don't.