Устранение неполадок, связанных с JS и FF onclick

Question

Я надеюсь, что кто-то может посмотреть на мой код и сообщить мне, где он не работает в FF. По сути, функция onclick не срабатывает. Вот JS:

function clear_field(field) {
            if (field.value==field.defaultValue) {
                    field.value=''
            }
    }
function calsq(form) {
 var tonf = 0.010000000000000002; // cubic feet to tons
 var cyards = 0.037;
 var rwunit = eval(fill.rwunit.value); //ft or in
 var rwidth = eval(fill.rwidth.value); //quantity
 var rwv = (rwidth) / (rwunit); // value now in feet
 var rlunit = eval(fill.rlunit.value); //ft or in
 var rlength = eval(fill.rlength.value); //quantity
 var rlv = (rlength) / (rlunit); // value now in feet
 var rthick = eval(fill.rthick.value); //quantity
 var rtv = (rthick) / 12; // value now in feet
 var rcir = 0; // factor 1728 cubic inches
 var rcyr = 0; // factor 27 cubic yards

 fill.rcyr.value = Math.round(((rwv) * (rlv) * (rtv) * (cyards)) * 10000) / 10000; // value now in cubic yards
}

А вот и форма:

<form name="fill">
  <input name="rcyr" type="text" value="0" size="10" maxlength="8" readonly="readonly" id="soil_total" />
  <table border="0" align="center" cellpadding="6" cellspacing="0">
      <td align="right"> <p>width </p></td>
      <td><input name="rwidth" type="text" class="values" onfocus="clear_field(this)" value="0" /></td>
      <td><select name="rwunit">
          <option value = "1" selected="selected">Feet </option>
          <option value = "12">Inches </option>
        </select></td>
    </tr>
    <tr>
      <td align="right"> <p>length </p></td>
      <td><input name="rlength" type="text" class="values" onfocus="clear_field(this)" value="0" /></td>
      <td><select name="rlunit">
          <option value = "1" selected="selected">Feet </option>
          <option value = "12">Inches </option>
        </select></td>
    </tr>
    <tr>
      <td align="right"><p>depth</p></td>
      <td colspan="2"><select name="rthick">
          <option value = "2">2 Inches</option>
          <option value = "4">4 Inches</option>
          <option value = "6" selected="selected">6 Inches</option>
        </select>
        <input type="hidden" name="rcmunit" value = "2" /></td>
    </tr>
  </table>
  <input type="button" onclick="javascript:calsq('fill')" src="soil_calculator/images/soil_calculate.png" value="calc" />
</form>

Все другие браузеры запускают событие и рассчитывают общее количество, а Firefox - нет. Любая помощь с благодарностью.

ОБНОВЛЕНО

Большое спасибо за все советы и предложения. Ниже приведен рабочий код.

function calsq(form) {
var tonf = 0.010000000000000002; // cubic feet to tons
var cyards = 0.037;
var rwunit = +document.forms.fill.rwunit.value; //ft or in
var rwidth = +document.forms.fill.rwidth.value; //quantity
var rwv = (rwidth) / (rwunit); // value now in feet
var rlunit = +document.forms.fill.rlunit.value; //ft or in
var rlength = +document.forms.fill.rlength.value; //quantity
var rlv = (rlength) / (rlunit); // value now in feet
var rthick = +document.forms.fill.rthick.value; //quantity
var rtv = (rthick) / 12; // value now in feet
var rcir = 0; // factor 1728 cubic inches
var rcyr = 0; // factor 27 cubic yards
document.forms.fill.rcyr.value = Math.round(((rwv) * (rlv) * (rtv) * (cyards)) * 10000) / 10000; // value now in cubic yards

}

и форма:

<form name="fill">
  <input name="rcyr" type="text" value="0" size="10" maxlength="8" readonly="readonly" id="soil_total" />
  <table border="0" align="center" cellpadding="6" cellspacing="0">

      <td align="right"> <p>width </p></td>
      <td><input name="rwidth" type="text" class="values" onfocus="clear_field(this)" value="0" /></td>
      <td><select name="rwunit">
          <option value = "1" selected="selected">Feet </option>
          <option value = "12">Inches </option>
        </select></td>
    </tr>
    <tr>
      <td align="right"> <p>length </p></td>
      <td><input name="rlength" type="text" class="values" onfocus="clear_field(this)" value="0" /></td>
      <td><select name="rlunit">
          <option value = "1" selected="selected">Feet </option>
          <option value = "12">Inches </option>
        </select></td>
    </tr>
    <tr>
      <td align="right"><p>depth</p></td>
      <td colspan="2"><select name="rthick">
          <option value = "2">2 Inches</option>
          <option value = "4">4 Inches</option>
          <option value = "6" selected="selected">6 Inches</option>
        </select>
        <input type="hidden" name="rcmunit" value = "2" /></td>
    </tr>
  </table>
  <img src="soil_calculator/images/soil_calculate.png" width="160" height="43" alt="Calculate Volume" onclick="calsq('document.forms.fill')" style="cursor:pointer"/>
</form>

Спасибо!

Answer 1

Попробуйте загрузить firebug .Это поможет вам отладить ваш JavaScript в Firefox.

Answer 2

Простое использование fill не является функциональным способом обращения к форме в FF. См. http://jsfiddle.net/nrabinowitz/yLELV/2/ для примера.

• Кнопка Click 1 пытается сослаться на fill; он работает в Chrome, но не работает в FF.
• Кнопка Click 2 относится к document.forms.fill и работает как в FF, так и в Chrome.

Как уже отмечали другие, я не уверен, что это единственная проблема в вашем сценарии, но он определенно умрет с fill is not defined в FF.

Кроме того, я вижу много похожих вопросов по SO, и мой первый вопрос всегда так: почему вы не используете библиотеку фреймворков? Если вы хотите любой вид манипулирования DOM, посмотрите jQuery , Prototype или MooTools - вам не нужно иметь дело с Такая проблема возникает самостоятельно, когда все фреймворки решили ее действительно надежными способами.

Answer 3

Не уверен, что это решит проблему, но рассмотрим несколько первых шагов:

Вам не нужно ставить javascript: в onclick.

Замените все eval(...) на что-то вроде rwunit = +fill.rwunit.value;, они преобразуются в числа.И дайте всем нам здесь обещание, что никогда, никогда не будете использовать eval снова.