<!DOCTYPE html>
<html>
<head>
<script src="moo.js"></script>
<script language="javascript" type="text/javascript">
window.addEvent('domready', function()
{
var list = $$('.clicky');
list.each(function(element)
{
var fx = new Fx.Styles(element, {
duration:100,
wait:false
});

element.addEvent('mouseenter', function(){
if(!element.selected) {
fx.start({
'opacity': '0.7'
});
}
});

element.addEvent('mouseleave', function(){
if(!element.selected) {
fx.start({
'opacity': '1'
});
}
});

element.addEvent('click', function(){
if(element.selected) {
element.selected = false;
fx.start({'opacity': '1'});
}
else {
element.selected = true;
fx.start({'opacity': '0.5'});
image_one(element);
}

});

//second click

//

});
});

var results = Array();
results["barry-bonds"] = "<img src=\"img/barry-bonds.jpg\">";
results["alf"] = "<img src=\"img/alf.jpg\">";
results["bar-stool"] = "<img src=\"img/bar-stool.jpg\">";
results["mario"] = "<img src=\"img/mario.jpg\">";


var selected = Array();

function image_one(element) {
selected.push(element);
if(selected.length == 1) { // do the thing


var result = results[selected[0].id];
if(!result) result = results[selected[1].id];


// do something with the result
document.getElementById("blah").innerHTML=("I think '" + result + "' and");

selected = Array();
}
}

function image_two(element) {
selected.push(element);
if(selected.length == 2) { // do the thing


var result = results[selected[0].id];
if(!result) result = results[selected[1].id];


// do something with the result
document.getElementById("blahblah").innerHTML=("I think '" + result + "' and");

selected = Array();
}
}

</script>










<style type="text/css">
body {
margin: 0px;
background-color: #fff;
}
.clicky {
background-color: #ff6d6b;
margin: 20px;
width: 100px;
height: 100px;
border: 1px solid;
}

.candidate {
font-weight: bold;
}

#barry-bonds {
background-image: url(img/barry-bonds.jpg);
}

#alf {
background-image: url(img/alf.jpg);
}

#mario {
background-image: url(img/mario.jpg);
}

#bar-stool {
background-image: url(img/bar-stool.jpg);
}

#box {
width: 500px;
height: 600px;
border: 1px solid;
float: left;
background-color: #253262;
display: inline;
}

#blah {
width: 200px;
height: 200px;
border: 1px solid;
padding: 20px;
float: left;
margin-left: 1.4em;
}

#blahblah {
width: 200px;
height: 200px;
border: 1px solid;
padding: 20px;
float: left;
margin-left: 1.4em;
}

</style>

</head>
<body>

<div id="box">

<div class="clicky" id="barry-bonds" onClick="select('barry-bonds')"></div>
<div class="clicky" id="alf" onClick="select('alf')"></div>
<div class="clicky" id="bar-stool" onClick="select('bar-stool')"></div>
<div class="clicky" id="mario" onClick="select('mario')"></div>

</div>

<div id="blah">
</div>

<div id="blahblah">
</div>

</body>
</html>





So, I am completely new to JS. Here is my futile attempt at creating a character select screen. Basically, i want to get JS to let the user click two different characters. WHen the first character is selected, it is eliminated from the array as a possible choice, and displayed in a second box. when the second character is selected, it is also placed into the second box. the final result is a box with two characters in it. secondly, i want to allow the user to "reset" all the choices so they can have at it again.

Any help in pointing me in the right direction would be appreciated. I don't mind redoing the whole thing, as I think I will most likely hit a dead end pretty soon...