WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:リロードしないで計算する

0:[投稿] マンタ [2002/08/19 23:02 ][環境:WIN+NN WIN系+Java]

インプットボックスに入力した値をもとに計算結果をインプットボックスではなくテキストで表示したいと思っています。計算結果をリロードせずにテキストとして反映する手段はありますか?
例えば、
1行目(インプットボックス)+2行目(インプットボックス)=3行目(インプットボックス)と言うのはJavascriptで実現可能なのは承知しているのですが、この3行目(結果)をインプットボックスではなく「テキスト」で表示したいのですが…。
…DHTMLのレイヤーで表示するくらいですかね…。それ以外の方法をご存知の方は是非是非!!!

一応、ブラウザーはNNとしておりますが、IEでの実現方法があればそれでも良いので教えてください。


<html>
<head>
<title></title>
<BODY>
<form>
<TABLE BORDER="1" CELLSPACING=0 vspace="0" hspace="0" BGCOLOR="#FFFFFF">
<TR BGCOLOR="">
<TD ALIGN=RIGHT><INPUT type="text" name="a" maxlength="10" size="8" value="0.0"></TD>
</TR>
<TR BGCOLOR="">
<TD ALIGN=RIGHT><INPUT type="text" name="a" maxlength="10" size="8" value="0.0"></TD>
</TR>
<TR BGCOLOR="">
<TD ALIGN=RIGHT><FONT SIZE="4"> </FONT></TD>
</TR>
</TABLE>
</form>
</BODY>
</HTML>


1:[回答] ナン [2002/08/20 09:23 ]

<script>
function tasu(){
  var ans = eval(document.fm1.a.value) + eval(document.fm1.b.value);

  var y = document.getElementById('ans');
  if(y.childNodes[0] != undefined){
     y.removeChild(y.childNodes[0]);
  }
  y.appendChild(document.createTextNode(ans));

}
</script>
<form name="fm1">
<TABLE BORDER="1" CELLSPACING=0 vspace="0" hspace="0" BGCOLOR="#FFFFFF">
<TR BGCOLOR="">
<TD ALIGN=RIGHT><INPUT type="text" name="a" maxlength="10" size="8" value="0.0"></TD>
</TR>
<TR BGCOLOR="">
<TD ALIGN=RIGHT><INPUT type="text" name="b" maxlength="10" size="8" value="0.0" onblur="tasu()"></TD>
</TR>
<TR BGCOLOR="">
<TD ALIGN=RIGHT><FONT SIZE="4" id="ans"></FONT></TD>
</TR>
</TABLE>
</form>

説明は以下参照のこと。
http://www.parkcity.ne.jp/~chaichan/src/javascdom01.htm


2:[回答] ma-to [2002/08/20 14:35 ]


(回答)

> IEでの実現方法があればそれでも良いので

http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/setexpression.asp
http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/setExpression.htm


(>>1 が思い切り手を抜いて演出しているので関連を)

エラー回避について

JavaScript 使用者は若い人 (未成年者) が多いように感じる。だからというわけでもないが、意識が極めて低い。過去に書いたことがあるが、しつこく繰り返す。

古いブラウザでいきなりコンパイルエラーが発生しないようにする仕組みは用意されている。例に漏れず、「述語は Java の猿真似、内容は Perl の猿真似」で、eval 文 (の類、文字列) を使う。小汚くなるとか格好悪いとか言ってられないと思う。

    × if(o.p)
    × if(!!o.p)
    × if(o.p!=void(0))
    × if(o.p!=undefined)
    ○ if(typeof o.p!='undefined')
最後のは文字列での評価になっている。

また、コンストラクタがあれば必ずそれを使う。if 文でエラー回避が可能。
    × var regexp=/\w/;
    ○ var regexp=new RegExp('\\w');
後者は文字列を実引数にとっているし、旧来の書式を踏襲している。他にも「[]」ではなく「new Array」、「{}」ではなく「new Object」、など。

変数のスコープがグローバルになるから
    o.m=new Function(文字列);
を使えない局面にしばしば遭遇する。場合によってはグローバル変数を増やせば解決するが、それは悪行。絶対に避けなければならない。この場合も迷わずに、
    eval("o.m=function();");
とするべきだ。詳しくは知らないが、Perl ではこの合意はほぼ完全に出来上がっているように見受ける。単にモジュールを使用する場合にも、誰もが当たり前のように eval する。一方 JavaScript の実情は「特定のブラウザの特定のバージョンでしか通用しない『書式 (新しいプロパティとかメソッドとかではなくあくまで書き方)』が用いられたコードしか存在しない」といったところだろう。前者に「必要だから」という理由がある以上、比較されるべきものではない。つまり、単にコンパイルエラーを回避する意識があるかないかという点での比較である。
但し。JavaScript に関して2冊知っているまともな書籍の1冊であるオライリーの第4版では色んな箇所でこの回避が書き換えられている。少なくとも「=function」に関しては既に遠慮なく使ってもよい時代なのかもしれないな。


3:[回答] ma-to [2002/08/20 14:48 ]

訂正。
   eval("o.m=function();");

   eval("o.m=function(){};");
へ。


4:[回答] マンタ [2002/08/20 19:56 ]

ナンさん、ma-to さんありがとうございます。
しかし、こうもIEとNNでできることに差があることには、改めてびっくりさせられます(独り言ですが…)。


5:[回答] ナン [2002/08/21 09:28 ]

>>2
ma-toさん、いつもありがとうございます。
なかなか、全部理解できない未熟者ですが、
また、ご指導よろしくおねがいいたします。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World