みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

超初心者です。buttonをselectに変えるには?

<SCRIPT language="JavaScript">
function calc1(){document.keisan.Z.value=eval(document.keisan.X.value)*1;}
function calc2(){document.keisan.Z.value=eval(document.keisan.X.value)*2;}
function calc3(){document.keisan.Z.value=eval(document.keisan.X.value)*3;}
</SCRIPT>
</head>
<FORM name="keisan" >
<INPUT type="text" name="X" size="4">
<INPUT type="text" name="Z" size="6">

<INPUT type="button" value="1" onClick="calc1()">
<INPUT type="button" value="2" onClick="calc2()">
<INPUT type="button" value="3" onClick="calc3()">

<INPUT type="reset" value="やりなおし">
</FORM>

これの INPUT type="button"を<select>~<select>
に変えたいと思っています。
自分の頭ではいろいろやってもうまくいきませんでした。
どなたか御教授を宜しくお願い致します。

投稿日時 - 2008-02-18 09:06:54

QNo.3786355

すぐに回答ほしいです

質問者が選んだベストアンサー

わたしもやってみました。
------------------------------------------------------------------------

<html>
<head>
<script language="JavaScript" type="text/javascript">
var x1,x2,x3,x4;
function calc1(){return Math.round(eval(x1)*eval(x1)*eval(x3)*eval(x4)*0.01*0.00617)*0.1;}
function calc2(){return Math.round(eval(x1)*eval(x1)*eval(x3)*eval(x4)*0.01*0.0068 )*0.1;}
function calc3(){return Math.round(eval(x1)*eval(x2)*eval(x3)*eval(x4)*0.01*0.00785)*0.1;}
function calc4(){return Math.round(eval(x1)*eval(x1)*eval(x3)*eval(x4)*0.01*0.00617-eval(x2)*eval(x2)*eval(x3)*eval(x4)*0.01*0.00617)*0.1;}

function calc(f) {
x1 = document.keisan.X1.value;
x2 = document.keisan.X2.value;
x3 = document.keisan.X3.value;
x4 = document.keisan.X4.value;
y = x1+x2+x3+x4;
if ( y=="" || y.match(/[^0-9]/) ) { alert("数字を入力してください");return false; }
document.keisan.Z.value = eval(f)();
}
</script>
</head>

<body>
<form name="keisan" action="">
<input type="text" name="X1" size="4" value="">
<input type="text" name="X2" size="4" value="">
<input type="text" name="X3" size="4" value="">
<input type="text" name="X4" size="4" value="">:&nbsp;
<input type="text" name="Z" size="10" value="">
<hr />
<select name="bai" onchange="calc(this.value)">
<option value="">
選択
</option>
<option value="calc1">1</option>
<option value="calc2">2</option>
<option value="calc3">3</option>
<option value="calc4">4</option>
</select>
<input type="reset" value="reset">
</form>
</body>
</html>

投稿日時 - 2008-02-18 13:18:35

お礼

早速貼り付けてさせて頂きました。素晴らしいご回答ありがとう御座います。貼り付けるだけで私がやりたかったことは見事に実現させて頂きました。早速使わさせて頂きます。たいへん勉強になります。私のレベルはでは全く考えられませんでした。またなにかありましたら是非宜しくお願い致します。本当にありがとう御座いました。

投稿日時 - 2008-02-18 13:43:57

ANo.5

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(5)

ANo.4

なるほど計算式をかえるのであれば、switchするのが妥当ですね

<SCRIPT language="JavaScript">
function calc(obj){
if(obj.value=="") return false;
var f=obj.form;
switch(obj.value){
case "1":
calc1(f);
break;
case "2":
calc2(f);
break;
case "3":
calc3(f);
break;
case "4":
calc4(f);
break;
}
}
function calc1(f){
f.Z.value="計算1の結果";
}
function calc2(f){
f.Z.value="計算2の結果";
}
function calc3(f){
f.Z.value="計算3の結果";
}
function calc4(f){
f.Z.value="計算4の結果";
}
</SCRIPT>
<body>
<FORM>
<INPUT type="text" name="X" size="4">
<INPUT type="text" name="X2" size="4">
<INPUT type="text" name="L" size="4">
<INPUT type="text" name="P" size="4">
<INPUT type="text" name="Z" size="6">
<P>
<select onChange="calc(this)">
<option value="">選択</option>
<option value="1">1計算</option>
<option value="2">2計算</option>
<option value="3">3計算</option>
<option value="4">4計算</option>
</select>
<INPUT type="reset" value="やりなおし">
</FORM>

投稿日時 - 2008-02-18 11:47:07

お礼

素晴らしいご回答ありがとう御座います。私のレベルはでは私の式に変換するのが難しいです。しかしながらたいへん勉強になりました。私の頭では全く考えられませんでした。またなにかありましたら是非宜しくお願い致します。本当にありがとう御座いました。

投稿日時 - 2008-02-18 13:47:15

ANo.3

こんにちは

こんな感じですか?

<script type="text/javascript"><!--
function calc(n) {
m = document.keisan.X.value;
if(m.match(/[^0-9]/)) { alert("数字を入力してください");return false; }
document.keisan.Z.value = m * n;
if(n == "" || m == "") document.keisan.Z.value ="";
}
//--></script>



<form name="keisan">
<input type="text" name="X" size="4" value="">
<input type="text" name="Z" size="6" value="">

<select name="bai" onchange="calc(this.value)">
<option value="">選択</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="reset" value="reset">
</form>

投稿日時 - 2008-02-18 09:58:41

補足

ご回答たいへんありがとう御座います。お忙しいところ心よりご厚意に感謝致します。教えて頂いた事はたいへん勉強になります。
しかし私の質問の式が悪かったのと私がしたい事をこの式に置き換える事はまだ私の頭では出来ませんのでここにもう一度本当の式を貼り付けさせて頂きますのでもし宜しければこれのボタンをselectできる式に御教授頂けないでしょうか?
<SCRIPT language="JavaScript">
function calc1(){document.R.Z.value=Math.round(eval(document.R.X.value)*eval(document.R.X.value)*eval(document.R.L.value)*eval(document.R.P.value)*0.01*0.00617)*0.1;}
function calc2(){document.R.Z.value=Math.round(eval(document.R.X.value)*eval(document.R.X.value)*eval(document.R.L.value)*eval(document.R.P.value)*0.01*0.0068 )*0.1;}
function calc3(){document.R.Z.value=Math.round(eval(document.R.X.value)*eval(document.R.X2.value)*eval(document.R.L.value)*eval(document.R.P.value)*0.01*0.00785)*0.1;}
function calc4(){document.R.Z.value=Math.round(eval(document.R.X.value)*eval(document.R.X.value)*eval(document.R.L.value)*eval(document.R.P.value)*0.01*0.00617-eval(document.R.X2.value)*eval(document.R.X2.value)*eval(document.R.L.value)*eval(document.R.P.value)*0.01*0.00617)*0.1;}
</SCRIPT>
<body>
<FORM name="R" >
<INPUT type="text" name="X" size="4">
<INPUT type="text" name="X2" size="4">
<INPUT type="text" name="L" size="4">
<INPUT type="text" name="P" size="4">
<INPUT type="text" name="Z" size="6">
<P>
<INPUT type="button" value="1計算" onClick="calc1()">
<INPUT type="button" value="2計算" onClick="calc2()">
<INPUT type="button" value="3計算" onClick="calc3()">
<INPUT type="button" value="4計算" onClick="calc4()">
<INPUT type="reset" value="やりなおし">
</FORM>
何卒宜しくお願い致します。

投稿日時 - 2008-02-18 11:19:02

ANo.2

こんな感じでしょうか?

<SCRIPT language="JavaScript">
function calc(obj){
var f=obj.form;
if(obj.value!="") f.Z.value=parseFloat(f.X.value) * parseFloat(obj.value);
}
</SCRIPT>
<FORM>
<INPUT type="text" name="X" size="4" />
<INPUT type="text" name="Z" size="6" readonly />
<select onChange="calc(this)">
<option value="">選択</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<INPUT type="reset" value="やりなおし">
</FORM>

投稿日時 - 2008-02-18 09:56:08

補足

ご回答たいへんありがとう御座います。お忙しいところ心よりご厚意に感謝致します。教えて頂いた事はたいへん勉強になります。
しかし私の質問の式が悪かったのと私がしたい事をこの式に置き換える事はまだ私の頭では出来ませんのでここにもう一度本当の式を貼り付けさせて頂きますのでもし宜しければこれのボタンをselectできる式に御教授頂けないでしょうか?
<SCRIPT language="JavaScript">
function calc1(){document.R.Z.value=Math.round(eval(document.R.X.value)*eval(document.R.X.value)*eval(document.R.L.value)*eval(document.R.P.value)*0.01*0.00617)*0.1;}
function calc2(){document.R.Z.value=Math.round(eval(document.R.X.value)*eval(document.R.X.value)*eval(document.R.L.value)*eval(document.R.P.value)*0.01*0.0068 )*0.1;}
function calc3(){document.R.Z.value=Math.round(eval(document.R.X.value)*eval(document.R.X2.value)*eval(document.R.L.value)*eval(document.R.P.value)*0.01*0.00785)*0.1;}
function calc4(){document.R.Z.value=Math.round(eval(document.R.X.value)*eval(document.R.X.value)*eval(document.R.L.value)*eval(document.R.P.value)*0.01*0.00617-eval(document.R.X2.value)*eval(document.R.X2.value)*eval(document.R.L.value)*eval(document.R.P.value)*0.01*0.00617)*0.1;}
</SCRIPT>
<body>
<FORM name="R" >
<INPUT type="text" name="X" size="4">
<INPUT type="text" name="X2" size="4">
<INPUT type="text" name="L" size="4">
<INPUT type="text" name="P" size="4">
<INPUT type="text" name="Z" size="6">
<P>
<INPUT type="button" value="1計算" onClick="calc1()">
<INPUT type="button" value="2計算" onClick="calc2()">
<INPUT type="button" value="3計算" onClick="calc3()">
<INPUT type="button" value="4計算" onClick="calc4()">
<INPUT type="reset" value="やりなおし">
</FORM>
何卒宜しくお願い致します。

投稿日時 - 2008-02-18 10:48:15

ANo.1

タグについては、
http://www.tohoho-web.com/html/select.htm
を参照してください。
JavaScriptの部分は、OnClickをOnChangeに変更してください。

>うまくいかない
うまくいかないコードを載せていただければ、どこでつまずいているのか、指摘しやすいのですが。。。

投稿日時 - 2008-02-18 09:28:32

補足

ご回答たいへんありがとう御座います。お忙しいところ心よりご厚意に感謝致します。
直して頂きたい式を貼り付けさせて頂きますのでもし宜しければこれのボタンをselectできる式に御教授頂けないでしょうか?
<SCRIPT language="JavaScript">
function calc1(){document.R.Z.value=Math.round(eval(document.R.X.value)*eval(document.R.X.value)*eval(document.R.L.value)*eval(document.R.P.value)*0.01*0.00617)*0.1;}
function calc2(){document.R.Z.value=Math.round(eval(document.R.X.value)*eval(document.R.X.value)*eval(document.R.L.value)*eval(document.R.P.value)*0.01*0.0068 )*0.1;}
function calc3(){document.R.Z.value=Math.round(eval(document.R.X.value)*eval(document.R.X2.value)*eval(document.R.L.value)*eval(document.R.P.value)*0.01*0.00785)*0.1;}
function calc4(){document.R.Z.value=Math.round(eval(document.R.X.value)*eval(document.R.X.value)*eval(document.R.L.value)*eval(document.R.P.value)*0.01*0.00617-eval(document.R.X2.value)*eval(document.R.X2.value)*eval(document.R.L.value)*eval(document.R.P.value)*0.01*0.00617)*0.1;}
</SCRIPT>
<body>
<FORM name="R" >
<INPUT type="text" name="X" size="4">
<INPUT type="text" name="X2" size="4">
<INPUT type="text" name="L" size="4">
<INPUT type="text" name="P" size="4">
<INPUT type="text" name="Z" size="6">
<P>
<INPUT type="button" value="1計算" onClick="calc1()">
<INPUT type="button" value="2計算" onClick="calc2()">
<INPUT type="button" value="3計算" onClick="calc3()">
<INPUT type="button" value="4計算" onClick="calc4()">
<INPUT type="reset" value="やりなおし">
</FORM>
何卒宜しくお願い致します。

投稿日時 - 2008-02-18 11:21:23

あなたにオススメの質問