プロダウンメニューの選択内容に従って計算結果を表示した

[新着] TAG indexオフライン版 3.0 を準備中です

0   名前： kopo3 ： 2007/04/23（月） 11:18  ID:vTpJ3fTU sub-9F
プルダウンメニューで選択した内容に従って計算結果を表示したい、と考えているのですが、下記のスクリプトが、InternetExplorerでは期待通りに動くのですが、Firefoxでは計算結果が表示されません(Javascriptはオンになっています)。これがFirefoxでも表示されるようにするにはどうすればよいか教えてください。よろしく御願いします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>JavaScriptテスト</title>
<SCRIPT language="JavaScript">
<!--
function calc(){
if (consent_year != "xx"){
num=parseFloat(consent_year.value)+1900;
document.myForm.calc_year.value=num;
}
}
// -->
</SCRIPT>
</head>
<body>
<select name="consent_year" onchange="calc()">
<option value="xx"></option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
</select>年

<form name="myForm">
<input type="text" name="calc_year">
</form>
</body>
</html>

1   名前： 匿名 ： 2007/04/23（月） 11:18  ID:0wXiJxwK sub-Ds
ここ読んでみるとか：
http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=1106
2   名前： 匿名 ： 2007/04/23（月） 11:18  ID:KZQyw1Ds sub-Cz
>>0
> <SCRIPT language="JavaScript">

HTML 4.0 から 10 年も経つのに、未だに language 属性なぞ使っているようなサンプルは、もう無条件で参考にしてはいけない。

> InternetExplorerでは期待通りに動くのですが、Firefoxでは計算結果が表示されません

標準的ではない、IE 独自記法を使っているのだから当たり前。
<script type="text/javascript">

function calc (select) {    // select === document.forms[0].elements['consent_year']
    if (select.value != "xx") {
        var num = parseFloat (select.value) + 1900;
        select.form.elements['calc_year'].value = num;
    }
}

</script>

<form action="#">
  <p>
    <select name="consent_year" onchange="calc (this);">
      <option value="xx"></option>
      <option value="00">00</option>
      <option value="01">01</option>
      <option value="02">02</option>
      <option value="03">03</option>
      <option value="04">04</option>
      <option value="05">05</option>
      <option value="06">06</option>
      <option value="07">07</option>
      <option value="08">08</option>
      <option value="09">09</option>
      <option value="10">10</option>
    </select>
    年
  </p>
  <p>
    <input type="text" name="calc_year">
  </p>
</form>
3   名前： kopo3 ： 2007/04/23（月） 11:18  ID:vTpJ3fTU sub-9F
お二人様どうもありがとうございました。

私が読んでいた参考書がIEのみを対象にかかれていたみたいです。
今後標準的な書き方を身につけるべく上記教えていただいたことを参考にしたいと思います。
4   名前： 匿名 ： 2007/04/23（月） 11:18  ID:KZQyw1Ds sub-Cz
>>0
今さらながら、気になったので確認してみたけど、

> if (consent_year != "xx"){

これだと IE でも『期待通り』には動かないよね。最初の option 要素を選択してみれば、すぐ分かるかと。


HTML のフォームは、昔ながらの慣習が多くて面倒くさい。そして、HTML のフォームが廃れるまでは（いつになることやら）、以下の書き方をずっと引きずることになるだろう。
var c = document.forms[0].elements[0];

ページ中の、0 番目（最初）の form 要素の、0 番目（最初）のフォームコントロールを指す[*]。あるいは、
var c = document.forms['ID'].elements['NAME'];

ページ中の、「ID」という id 属性を持つ form 要素（ここで今さら name 属性なんて使っちゃ駄目だ）の中の、「NAME」という name 属性のフォームコントロール（ここでは name 属性を使う）を指す[*]。そんでもって、
// c が属している form 要素
c.form;

// c が属している form 要素中の、"NAME2" のコントロール
c.form.elements['NAME2'];

// c の value 属性値
c.value;
    // c が select 要素の場合、選択中の option 要素の value 属性値
    // c が textarea 要素の場合、その内容

残りは実戦で覚えていけば、まずは十分。


以下は読まなくて良い。

[*] DOM HTML 的には
document.forms.item (0).elements.item (0)
document.forms.namedItem ('ID').elements.namedItem ('NAME')
だが、ECMAScript で使用する場合は [..] 記法が認められているので、
document.forms[0].elements[0];
document.forms['ID'].elements['NAME'];
と書ける。さらに、[..] 内の文字列が ECMAScript の識別子としての条件を満たすなら、
document.forms.ID.elements.NAME
のようにも書ける（数字で始まる文字列は識別子にならないので駄目……どの道、ID が数字で始まることはありえないわけだが）。さらに、JavaScript 1.0 からの慣習に従って、
document.ID.NAME
のようにも書けるが、ここまで省略してしまうと document や HTMLFormElement 本来のプロパティとぶつかってしまい、好ましくない。さらに、これを逆手にとって
document['ID']['NAME']
のように書く人もいるが、こうなるともうオブジェクトの構造がぐちゃぐちゃなので、止めてほしい。
一覧へ戻る