Anyone know why this isn't working in Firefox?

    <script type="text/javascript">
function goHo() {
hu.innerHTML="????";
}
</script>
<div class="contentPane" id="Calculator" style="display: block;">
                    <h2>Savings Calculator</h2><a href="Home" class="backArrow"></a>
                    <h3>How much do you spend on heating and hot water a year?</h3>
                    <div id="SpendOptions">
                        <ul class="optionList">

                            <a href="#" onMouseOut="goHo()" onMouseOver="hu.innerHTML='£60-180'"><li id="CostOption1">£600 - £900</li></a>
                            <a href="#" onMouseOut="goHo()" onMouseOver="hu.innerHTML='£90-240'"><li id="CostOption2">£900 - £1200</li></a>
                            <a href="#" onMouseOut="goHo()" onMouseOver="hu.innerHTML='£120-300'"><li id="CostOption3">£1200 - £1500</li></a>
                            <a href="#" onMouseOut="goHo()" onMouseOver="hu.innerHTML='£150-360'"><li id="CostOption4">£1500 - £1800</li></a>
                            <a href="#" onMouseOut="goHo()" onMouseOver="hu.innerHTML='£360'"><li id="CostOption5">£1800+</li></a>
                        </ul>

                    </div>
  <div id="SavingsBox" style="display: block;">
                        <h4>This year you could save:</h4>
                        <h1 id="hu"></h1>

                    </div>

Anyone know why this isn't working in Firefox?

    <script type="text/javascript">
function goHo() {
hu.innerHTML="????";
}
</script>
<div class="contentPane" id="Calculator" style="display: block;">
                    <h2>Savings Calculator</h2><a href="Home" class="backArrow"></a>
                    <h3>How much do you spend on heating and hot water a year?</h3>
                    <div id="SpendOptions">
                        <ul class="optionList">

                            <a href="#" onMouseOut="goHo()" onMouseOver="hu.innerHTML='£60-180'"><li id="CostOption1">£600 - £900</li></a>
                            <a href="#" onMouseOut="goHo()" onMouseOver="hu.innerHTML='£90-240'"><li id="CostOption2">£900 - £1200</li></a>
                            <a href="#" onMouseOut="goHo()" onMouseOver="hu.innerHTML='£120-300'"><li id="CostOption3">£1200 - £1500</li></a>
                            <a href="#" onMouseOut="goHo()" onMouseOver="hu.innerHTML='£150-360'"><li id="CostOption4">£1500 - £1800</li></a>
                            <a href="#" onMouseOut="goHo()" onMouseOver="hu.innerHTML='£360'"><li id="CostOption5">£1800+</li></a>
                        </ul>

                    </div>
  <div id="SavingsBox" style="display: block;">
                        <h4>This year you could save:</h4>
                        <h1 id="hu"></h1>

                    </div>

• javascript
• innerhtml

• Do you think each ID creates a JavaScript variable? Or is hu defined somewhere else? If not use document.getElementById – MatTheCat Commented Aug 18, 2011 at 20:39
• Putting all elements in window by their IDs is a IE perversion (which apparently has infected Safari). Replace it (everywhere) with getElementById or the appropriate jQuery call and you'll be fine. – Michael Lorton Commented Aug 18, 2011 at 20:56

4 Answers 4

hu should be document.getElementById("hu"). (Just because an item has an ID, that does not mean that it will be a declared variable (id and existence as a variable have little to do with each other))

try:

 function goHo() {
     document.getElementById('hu').innerHTML="????";
 }

You need to use document.getElementById('hu').innerHTML = "???"

You can also say:

<a href="#" onMouseOut="goHo('????')" onMouseOver="goHo('£60-180')">...

function goHo(html) {
   document.getElementById('hu').innerHTML=html;
}

Demo: http://jsfiddle/8fUcG/2/