Variable Problems

I have the following code...
<center>Shoot an "A"</center>
<div class="shoot"><span onclick="alert('Miss');">BTEHJD</span><span id="a" onclick="document.all['a'].innerHTML = ' ';score();">A</span><span onclick="alert('Miss');">GDHJD</span><span id="b" onclick="document.all['b'].innerHTML = ' ';score();">A</span><span onclick="alert('Miss');">KBFKBM<br>B</span><span id="c" onclick="document.all['c'].innerHTML = ' ';score();">A</span><span id="d" onclick="document.all['d'].innerHTML = ' ';score();">A</span><span id="e" onclick="document.all['e'].innerHTML = ' ';score();">A</span><span onclick="alert('Miss');">BGDJJVB</span><span id="f" onclick="document.all['f'].innerHTML = ' ';score();">A</span><span onclick="alert('Miss');">G</span><span id="g" onclick="document.all['g'].innerHTML = ' ';score();">A</span><span onclick="alert('Miss');">HDJNJJ<br>HDFGBJVBKJGVJG</span><span id="h" onclick="document.all['h'].innerHTML = ' ';score();">A</span><span onclick="alert('Miss');">HFGTR</span></div>
<style>.shoot{cursor: crosshair; height: 75px; width: 200px; BORDER: solid 2px grey;}</style>
<button onclick="reset()">Reset</button>Score:<span id="score">0</span>
<script>
var score=0
function reset(){
document.all['a'].innerHTML = 'A';
document.all['b'].innerHTML = 'A';
document.all['c'].innerHTML = 'A';
document.all['d'].innerHTML = 'A';
document.all['e'].innerHTML = 'A';
document.all['f'].innerHTML = 'A';
document.all['g'].innerHTML = 'A';
document.all['h'].innerHTML = 'A';
var score=0;
document.all['score'].innerHTML = '0';
}
function score(){
var score=score+1;
document.all['score'].innerHTML = score;
}
</SCRIPT>
But the score always says zero can anyone
tell me what I am doing wrong?:confused:

Don't use document.all is deprecated and is IE propietary, use document.getElementById() (http://www.w3schools.com/HTMLDOM/met_doc_getelementbyid.asp) instead.

Secondly, avoid using the same variable name as to your function name.

You might find this modification useful:

<center>Shoot an "A"</center>
<div class="shoot"><span onclick="alert('Miss');">BTEHJD</span><span id="a" onclick="document.getElementById('a').innerHTML = ' ';score();">A</span><span onclick="alert('Miss');">GDHJD</span><span id="b" onclick="document.getElementById('b').innerHTML = ' ';score();">A</span><span onclick="alert('Miss');">KBFKBM<br>B</span><span id="c" onclick="document.getElementById('c').innerHTML = ' ';score();">A</span><span id="d" onclick="document.getElementById('d').innerHTML = ' ';score();">A</span><span id="e" onclick="document.getElementById('e').innerHTML = ' ';score();">A</span><span onclick="alert('Miss');">BGDJJVB</span><span id="f" onclick="document.getElementById('f').innerHTML = ' ';score();">A</span><span onclick="alert('Miss');">G</span><span id="g" onclick="document.getElementById('g').innerHTML = ' ';score();">A</span><span onclick="alert('Miss');">HDJNJJ<br>HDFGBJVBKJGVJG</span><span id="h" onclick="document.getElementById('h').innerHTML = ' ';score();">A</span><span onclick="alert('Miss');">HFGTR</span></div>
<style>.shoot{cursor: crosshair; height: 75px; width: 200px; BORDER: solid 2px grey;}</style>
<button onclick="reset()">Reset</button>Score:<span id="score">0</span>
<script>
var score1=0;
function reset(){
document.getElementById('a').innerHTML = 'A';
document.getElementById('b').innerHTML = 'A';
document.getElementById('c').innerHTML = 'A';
document.getElementById('d').innerHTML = 'A';
document.getElementById('e').innerHTML = 'A';
document.getElementById('f').innerHTML = 'A';
document.getElementById('g').innerHTML = 'A';
document.getElementById('h').innerHTML = 'A';
score1=0;
document.getElementById('score').innerHTML = '0';
}
function score(){
score1+=1;
document.getElementById('score').innerHTML = score1;
}
</SCRIPT>


Lastly, center is a deprecated element (http://www.codehelp.co.uk/html/deprecated.html). Find sometime to fix it.

Hope it helps.

Now I did what you recomended and added some more and have this code...

<center>Shoot an "A"</center>
<div class="shoot"><span onclick="scoredown();">BTEHJD</span><span id="a"

onclick="this.style.visibility = 'hidden';score();">A</span><span onclick="scoredown

();">GDHJD</span><span id="b" onclick="this.style.visibility = 'hidden';score

();">A</span><span onclick="scoredown();">KBFKBM<br>B</span><span id="c"

onclick="this.style.visibility = 'hidden';score();">A</span><span id="d"

onclick="this.style.visibility = 'hidden';score();">A</span><span id="e"

onclick="this.style.visibility = 'hidden';score();">A</span><span onclick="scoredown

();">BGDJJVB</span><span id="f" onclick="this.style.visibility = 'hidden';score

();">A</span><span onclick="scoredown();">G</span><span id="g"

onclick="this.style.visibility = 'hidden';score();">A</span><span onclick="scoredown

();">HDJNJJ<br>HDFGBJVBKJGVJG</span><span id="h" onclick="this.style.visibility =

'hidden';score();">A</span><span onclick="scoredown();">HFGTR</span></div>
<style>.shoot{cursor: crosshair; height: 75px; width: 200px; BORDER: solid 2px grey;}

</style>
<button onclick="reset()">Reset</button><button onclick="show()">Show Missed

A's</button>Score:<span id="score">0</span>
<script>
var score1=0;
function reset(){
document.getElementById('a').style.visibility = 'visible';
document.getElementById('b').style.visibility = 'visible';
document.getElementById('c').style.visibility = 'visible';
document.getElementById('d').style.visibility = 'visible';
document.getElementById('e').style.visibility = 'visible';
document.getElementById('f').style.visibility = 'visible';
document.getElementById('g').style.visibility = 'visible';
document.getElementById('h').style.visibility = 'visible';
document.getElementById('a').style.color = 'black';
document.getElementById('b').style.color = 'black';
document.getElementById('c').style.color = 'black';
document.getElementById('d').style.color = 'black';
document.getElementById('e').style.color = 'black';
document.getElementById('f').style.color = 'black';
document.getElementById('g').style.color = 'black';
document.getElementById('h').style.color = 'black';
var score1=0;
document.getElementById('score').innerHTML = score1;
}
function score(){
score1+=1;
document.getElementById('score').innerHTML = score1;
}
function scoredown(){
score1-=1;
document.getElementById('score').innerHTML = score1;
}
function show(){
document.getElementById('a').style.color = 'red';
document.getElementById('b').style.color = 'red';
document.getElementById('c').style.color = 'red';
document.getElementById('d').style.color = 'red';
document.getElementById('e').style.color = 'red';
document.getElementById('f').style.color = 'red';
document.getElementById('g').style.color = 'red';
document.getElementById('h').style.color = 'red';
}

</SCRIPT>

But even when you press reset the next time you click an "A" it goes back to your old score:confused:Here is an example...Click Here (http://bdubzunc.piczo.com/shootproblem)

Change var score1=0;
document.getElementById('score').innerHTML = score1; to
score1=0;
document.getElementById('score').innerHTML = score1;
(when you add var there, it just creates a new local variable, leaving the global variable's value intact)