ここから本文です

Javascriptでの足し算について

nig********さん

2009/12/3111:24:14

Javascriptでの足し算について

Javascriptで次のような簡単なプログラムを作ったのですが、

function tasizan() {

x = x.x_form.value
y = x + 5
alert(y)

}

この計算がうまく動作しません。

ちなみにHTMLの方のソースは以下の通りです。

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<script type="text/javascript" src="./script.js"></script>
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>
計算ページ
</title>
</HEAD>

<BODY>
入力内容に5が足されます。<BR>
<form name="x">
<input type="text" name="x_form"><BR>
<input type="button" value="yの値を計算" onClick="tasizan()">
</form>

</BODY></HTML>

これをうごかすと、フォームの内容…たとえば「4」に5が足され(?)、「45」が表示されます。
足し算ってそういうことじゃないんですが…

数値の足し算をするにはどのようにしたらいいんでしょうか?

補足思い出したので追加です。
これは足し算ではなくかけ算にすると問題なく動作するのですが、ボタンを押しても一度きりしか動作しません。(足し算でも一度きりです。)
なので、計算した後別の数値をフォームに入力して再計算、ということが出来ないのです。
何度でも動かせる方法はないでしょうか?

閲覧数:
4,406
回答数:
3

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

ii3********さん

2009/12/3112:02:09

y = x + 5とすると、文字列xと5を足そうとします。
この場合、文字列の足し算扱いになるので、文字列xの後ろに文字"5"が連結されます。
x = 4であれば、文字"4"と文字"5"を連結するので、文字"45"と言う結果になります。
正しく計算させるには、xを数値型に変換してやる必要があります。
ちなみに、文字列の計算式に"*"はありません。
この場合、文字列xの方が数値として扱われるので、掛け算だとうまくいきます。

次に、x = x.x_form.valueとすると、2回目以降は値を正しく取得できなくなります。
x = document.x.x_form.valueとしてください。

また各コードの最後にセミコロン";"がありません。
これを追加してください。

最後に、x_formに"abc"など文字列を入力された場合の処理がありません。
予期しない値を入力された場合の処理も必要です。


ということで、全部対応するとこんな形になるかと思います。
function tasizan() {
x = document.x.x_form.value;
if (!(isNaN(x))) {
y = Number(x) + 5;
alert(y);
}
}

質問した人からのコメント

2010/1/1 11:46:23

Number()を使えばいいんですね。
あと数字以外を入力されたときの条件が良く理解できなかったので、ifでyが正、負、0のどれでもないときで対応しました。

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

ttt********さん

2010/1/103:48:24

JavaScriptでは、文字列を連結する演算子“+”と、前後の値を加算する演算子“+”は、同じ記号で表されます。
よって後者の目的で使いたい時は、前後の値をどちらも数値にする必要があります。
フォームに入力された値は、文字列です。文字列を数値に変換するには、
parseInt(文字列)
または
文字列-0
とします。
ちなみに、演算子“-”や“*”は、それぞれ減算、乗算の意味しか持ちません。
また、計算が1回しか出来ない件は、form要素を表すxに、数値を代入していることが原因です。
そのため、form要素のname属性値か、計算前の数値を表す変数の名前を“x”以外のものにする必要があります。
(tasizan関数のローカル変数としてxを宣言してもOK)
以上をふまえたコード↓
function tasizan(){
var x=document.x.x_forms.value;
x=parseInt(x);
var y=x+5;
alert(y);
}
P.S. 専問用語ばっかりでごめんなさい^^;

nar********さん

編集あり2009/12/3113:04:25

function tasizan() {

x = document.x.x_form.value;
x = parseInt(x);
y = x + 5;
alert(y);

}

これでどうでしょう?
この場合入力フォームに入力されたものが半角数字ではなかった場合NuNがかえてきます。

それも分けたいというのであれば、

function tasizan() {

x = document.x.x_form.value;
x = parseInt(x);
y = x + 5;
if(y){
alert(y);
} else {
alert("数値ではありません。");
}
}




<BODY>
入力内容に5が足されます。<BR>
<form name="x">
<input type="text" name="x_form"><BR>
<input type="button" value="yの値を計算" onClick="tasizan();">
</form>

</BODY>


になります。

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる