JavaScript Problem

Question

I putted a litle java script on my page, and after that i wasnt able to perform some tasks with IE, like, when i want to add a new item, the text field cannot be selected, also on the Content Editor Web Part when i click on "Source Editor" the pop up does not want to appear.

Do you have idea why this happens. Here is the code on the javascript

function DepositBonusCalc() {
var amount = document.getElementById('amount');
var percentage = document.getElementById('percentage');
var bonus
if(amount.value>0 && percentage.value>0)
{   bonus = amount.value*(percentage.value/100)
    document.getElementById("BonusAmount").innerHTML = '<b>' + bonus + '</b>'
}
else
    document.getElementById("BonusAmount").innerHTML = '<b> -- </b>'

}

and here is the HTML

    <form name="BonusCalc" method="get" id="BonusCalc">
  <table style="font-size: 9px; float:left;">
    <tr >
      <td colspan="2" style="text-align:center;">Bonus Calculator</td>
    </tr>
    <tr >
      <td>Amount:</td>
      <td><input class="BonusCalcInput" type="text" name="amount" id="amount" onKeyUp="DepositBonusCalc()"></td>
    </tr>
    <tr>
      <td>Percentage</td>
      <td><input class="BonusCalcInput" type="text" name="percentage" id="percentage" onKeyUp="DepositBonusCalc()"></td>
    </tr>
    <tr>
      <td><strong>Bonus</strong></td>
      <td id="BonusAmount"></td>
    </tr>
  </table>
</form>

EDIT1: I checked the error message (located in root/_layouts/1033/form.js and i don't have access to that file) that is generated by the browser and here it is:

Message: 'hoverButton' is null or not an object
Line: 2038
Char: 2
Message: 'null' is null or not an object
Line: 2046
Char: 2

The code on those line is

    function RTE_TB_RemoveLastToolBarHover(strBaseElementID)
{
    var instanceVariables=RTE_GetEditorInstanceVariables(strBaseElementID);
    if (instanceVariables.hoverButton !=null)
    {
        RTE_TB_OnMouseOut(instanceVariables.hoverButton);
    }
}
function RTE_TB_SetLastToolBarHover(strBaseElementID, elemButton)
{
    var instanceVariables=RTE_GetEditorInstanceVariables(strBaseElementID);
    instanceVariables.hoverButton=elemButton;
}

EDIT2: Question tag renamed from JavaScript to HTML

Answer 1

Ok, I think that i found the solution: I just removed the form tags. Obviously, when there is two or more form on the same page, the functions RTE_TB_RemoveLastToolBarHover and RTE_TB_SetLastToolBarHover (in Form.js) are not working properly.

Nevertheless, I will appreciate if somebody has a solution about how to set it properly. For now it's working.

Thanks

Answer 2

you have nothing after "var bonus", no semicolon nor any assignment, I assume you want to set it to something like

var bonus = document.getElementById("BonusAmount");

Errors further up the page in your javascript will break things further down, as it'll halt javascript functionality if there's an error - this is the most likely suspect I think.

Answer 3

Are you by chance using IE7? See this blog post by Remy (@Rem on Twitter) about broken getElementById functionality in IE7.

http://remysharp.com/2007/02/10/ie-7-breaks-getelementbyid/

You can make this easier on yourself with jQuery if that's an option for you. Your function would just become something like...

function DepositBonusCalc() {
  var amount = $('#amount').val();
  var percentage = $('#percentage').val();
  if (amount.value > 0 && percentage.value > 0)
  {
    $('#BonusAmount').html(amount*(percentage/100));
  }
  else
    $('#BonusAmount').html('---');
  }
}