• ベストアンサー

何がおかしいのでしょうか?

プログラミング初心者なのですが、うまくJavaScriptの計算ができないようです。どのように変更すればいいのかがよくわからないです。 よろしくご指導お願いします。 <html> <head> <title> プログラミング基礎</title> <script language ="JavaScript" > function calc(){ sub1=498*num1.value; mug.value=sub1; sub2=748*num2.value; tea.value=sub2; sum=sub1+sub2; total.value=sum; } function calc(){ shouhi.value=Math.floor(total.value+735/1.05) </script> </head> <body><hr> マグカップ(1個 税込498円:お一人様限定5個まで)<br> 個数: <select name ="num1" onchange ="calc()"> <option value =0>0  <option value =1>1 <option value =2>2 <option value =3>3 <option value =4>4 <option value =5>5 <select/> &nbsp&nbsp 小計: <input type="text" size="8" name="sub1"> <br><br><hr> ティーカップ(1セット税込748円:お一人様限定5セットまで)<br> 個数: <select name ="num2" onchange ="calc()"> <option value =0>0  <option value =1>1 <option value =2>2 <option value =3>3 <option value =4>4 <option value =5>5 <select/> &nbsp&nbsp 小計: <input type="text" size="8" name="sub2"> <br><br><hr><br> 別途、送料として一律税込735円が必要になります。 <br><br><hr><br> お支払い総額: <input type="text" size="8" name="total">円 &nbsp うち、消費税額: <input type="text" size="8" name="shouhi">円 <br> <hr> </body> </html>

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

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

書かれている内容を見るとずいぶん古いものを参考にしているようですので まずは参考書を選びなおす事をお勧めします。 以下、とりあえず動くようにはしましたがいいお手本ってわけでもないのでお勉強がんばってください。 <html> <head> <title>プログラミング基礎</title> <script type="text/javascript"> function calc(){ //各項目にアクセスする手続き var Onum1 = document.getElementById('num1') var Osub1 = document.getElementById('sub1'); var Onum2 = document.getElementById('num2'); var Osub2 = document.getElementById('sub2'); var Ototal = document.getElementById('total'); var Oshouhi = document.getElementById('shouhi'); //各小計 Osub1.value=498*Onum1.value; Osub2.value=748*Onum2.value; //合計(足し算は文字列結合となるので整数化) Ototal.value=735 + parseInt(Osub1.value) + parseInt(Osub2.value); //消費税 Oshouhi.value=Math.floor(Ototal.value * 0.05); } </script> </head> <body><hr> マグカップ(1個 税込498円:お一人様限定5個まで)<br> 個数: <select id="num1" onchange="calc()"> <option value =0>0 <option value =1>1 <option value =2>2 <option value =3>3 <option value =4>4 <option value =5>5 </select> &nbsp&nbsp 小計: <input type="text" size="8" id="sub1"> <br><br><hr> ティーカップ(1セット税込748円:お一人様限定5セットまで)<br> 個数: <select id="num2" onchange="calc()"> <option value =0>0 <option value =1>1 <option value =2>2 <option value =3>3 <option value =4>4 <option value =5>5 </select> &nbsp&nbsp 小計: <input type="text" size="8" id="sub2"> <br><br><hr><br> 別途、送料として一律税込735円が必要になります。 <br><br><hr><br> お支払い総額: <input type="text" size="8" id="total">円 &nbsp うち、消費税額: <input type="text" size="8" id="shouhi">円 <br> <hr> </body> </html>

rinnshan
質問者

お礼

そうなんですか、一応大学の講義なのですが、古い文献を参考書に使っているのですか。参考にしてもっと深めて生きたいと思います。

その他の回答 (1)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

すでに回答がついたみたいですが、せっかく書いたのでサンプルあげときます。汎用性も含めていろいろ検討ください。 <html> <head> <title> プログラミング基礎</title> <script language ="JavaScript" > function calc(obj,price,target){ var f=obj.form; var v=obj.value; f[target].value=price * v; var sum=0; for(var i=0;i<f.length;i++){ if(f[i].className=="shoukei") sum+=Number(f[i].value); } if(sum>0) sum+=735; f["total"].value=sum; f["shouhi"].value=parseInt(sum/1.05*0.05); } </script> </head> <body> <form> <hr> マグカップ(1個 税込498円:お一人様限定5個まで)<br> 個数: <select name ="num1" onChange ="calc(this,498,'sub1')"> <option value =0>0  <option value =1>1 <option value =2>2 <option value =3>3 <option value =4>4 <option value =5>5 </select> &nbsp&nbsp 小計: <input type="text" size="8" name="sub1" value=0 style="text-align:right" class="shoukei"> <br><br><hr> ティーカップ(1セット税込748円:お一人様限定5セットまで)<br> 個数: <select name ="num2" onChange ="calc(this,748,'sub2')"> <option value =0>0 <option value =1>1 <option value =2>2 <option value =3>3 <option value =4>4 <option value =5>5 </select> &nbsp&nbsp 小計: <input type="text" size="8" name="sub2" value=0 style="text-align:right" class="shoukei"> <br><br><hr><br> 別途、送料として一律税込735円が必要になります。 <br><br><hr><br> お支払い総額: <input type="text" size="8" name="total" value="0" style="text-align:right" >円 &nbsp うち、消費税額: <input type="text" size="8" name="shouhi" value="0" style="text-align:right" >円 <br> <hr> </form> </body> </html>

rinnshan
質問者

お礼

私の知らないタグが多くてよくわからないのですが、なんとか勉強してわかるようになりたいと思います。

関連するQ&A

  • 何がおかしいのでしょうか?

    こんばんわ。これは古い型のプログラミングかもしれませんが、 講義でもやっているので、FORMタグが無くても動作はするようです。 しかし、プログラミングを自分で作ってみても全く動作しません(>_<) 具体的にどこがおかしいため動作が行われないのか、教えてください。 新しいタグを加えなくても講義では動作してますし、このまま 自分で眺めていても全く先に進みません。 よろしくお願いいたします。 <head> <title> プログラミング</title> <script language ="JavaScript" > function calc(){ sub1=798*num1.value; mug.value=sub1; sub2=748*num2.value; tea.value=sub2; sub3=1780*num3.value; teatime.value=sub3; sum=sub1+sub2+sub3; total.value=sum; sub4=3*num1.value; sub5=3*num2.value; sub6=6*num3.value; sum2=sub4+sub5+sub6; souryoupoint.value=sum2; sub7=(((souryoupoint-1) / 5) + 1)*525; souryou.value=sub7; total2.value=sub7+sum; tax.value=Math.round((sub7+sum)-(sub7+sum)/1.05); if(total<4000){post=souryou;} else if(total<7000){post=souryou/2;} else{post=souryou/3;} souryou.value=Math.floor(post); } </script> </head> <body><hr> マグカップ1ペア(2個セット)税込798円:送料ポイント=3<br> 個数: <input type="text" size="4" name="num1">&nbsp&nbsp&nbsp&nbsp 小計: <input type="text" size="8" name="mug">円<br><br> <hr> ティーカップ1セット(カップ&ソーサー)税込748円:送料ポイント=3<br> 個数: <input type="text" size="4" name="num2">&nbsp&nbsp&nbsp&nbsp 小計: <input type="text" size="8" name="tea">円<br><br> <hr> ティータイムセット 税込1780円:送料ポイント=6<br> (セット内容:ティーポット 1個&ティーカップ2セット)<br> 個数: <input type="text" size="4" name="num3">&nbsp&nbsp&nbsp&nbsp 小計: <input type="text" size="8" name="teatime">円<br><br><hr> 送料ポイント5毎に送料525円が必要となります。<br> 1~5⇒525円(税込)<br> 6~10⇒1050円(税込)<br> 11~15⇒1575円(税込) 以下、同様に計算します<br><br> サマーバーゲン実施中!<br> 送料を除き商品を4000円以上お買い上げの方は送料半額!<br> さらに、7000円以上(送料除く)お買い上げの方は送料を1/3に!!!<hr><br> <input type="button" value="計算" onclick=calc()"> &nbsp&nbsp&nbsp&nbsp&nbsp&nbspお支払い総額:<input type="text" size="8" name="total2">円&nbsp&nbsp&nbsp&nbsp うち消費税&nbsp&nbsp:&nbsp&nbsp<input type="text" size="8" name="tax">円 <br><br> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp(内訳)&nbsp&nbsp&nbsp&nbsp 商品代金:&nbsp&nbsp<input type="text" size="8" name="total">円&nbsp&nbsp /&nbsp&nbsp送料ポイント:&nbsp&nbsp<input type="text" size="8" name="souryoupoint"> ⇒送料:&nbsp&nbsp<input type="text" size="8" name="post"><br><br> <hr> </body> </html>

    • ベストアンサー
    • HTML
  • 電卓のJavaScript

    初心者で申し訳ないのですが、電卓のソースを作ってみたのですが、JavaScriptが間違っているためか「ページにエラーが発生しました」となり計算が行われません。 どのように、改変すればいいのでしょうか?どうかご教授お願いします。 <html> <head> <title> 電卓 </title> <script language = "JavaScript"> count = 0; sum= 0; flag =0; list = new Array( "0", "0","0","0","0",); function clist( ) { for( i = 0 ; i < 5 ; i++ ) { list[i] =0; } } function calc1() { num = sum; clist( ); display.value = num; flag = 1; } function calc2() { num = sum; clist( ); display.value = num; flag = 2; } function calc3() { num = sum; clist( ); display.value = num; flag = 3; } function calc4() { num = sum; clist( ); display.value = num; flag = 4; } function calc5() { clist( ); } function equal() { if(flag==1) { sum=num+sum; display.value=sum; clist( ); } else if(flag==2) { sum=num-sum; display.value=sum; clist( ); } else if(flag==3) { sum=num*sum; display.value=sum; clist( ); } else if(flag==4) { sum=num/sum; display.value=sum; clist( ); } } function push0( ) { list[count] = 0; sum = list[count]; for( i = 0 ; i < count ; i++ ) { temp=1; for( j = i ; j < count ; j++ ) { temp=temp*10; } sum+ =list[i]*temp; } count+=1; display.value=sum; } function push1( ) { list[count] = 1; sum = list[count]; for( i = 0 ; i < count ; i++ ) { temp=1; for( j = i ; j < count ; j++ ) { temp=temp*10; } sum+ =list[i]*temp; } count+=1; display.value=sum; } 同様に2~9 </script> </head> <body> <hr><br> <input type = "button" value ="7" onclick = "push7()">&nbsp <input type = "button" value ="8" onclick = "push8()">&nbsp <input type = "button" value ="9" onclick = "push9()">&nbsp&nbsp <input type = "button" value ="+" onclick = "calc1()">&nbsp<br><br> <input type = "button" value ="4" onclick = "push4()">&nbsp <input type = "button" value ="5" onclick = "push5()">&nbsp <input type = "button" value ="6" onclick = "push6()">&nbsp&nbsp <input type = "button" value ="-" onclick = "calc2()">&nbsp<br><br> <input type = "button" value ="1" onclick = "push1()">&nbsp <input type = "button" value ="2" onclick = "push2()">&nbsp <input type = "button" value ="3" onclick = "push3()">&nbsp&nbsp <input type = "button" value ="×" onclick = "calc3()">&nbsp<br><br> <input type = "button" value ="0" onclick = "push0()">&nbsp <input type = "button" value ="=" onclick = "equal()">&nbsp <input type = "button" value ="C" onclick = "calc5()">&nbsp&nbsp <input type = "button" value ="÷" onclick = "calc4()">&nbsp<br><br> <br><br><hr><br>&nbsp&nbsp&nbsp <input type = "text" size ="10" name = "display">&nbsp <br><br><hr><br> </body> </html>

  • 自分のIEでは計算が行われません。

    昨日も質問させてもらったのですが、また困ったことが起きました。 下のHTMLをIEで表示させてみたのですが、友人の環境ではコンボボックスの数字を変えることによって計算されるのですが、私の環境では計算が行われません。 何が原因なのでしょうか? <html> <head> <title> プログラミング基礎 </title> <script language ="JavaScript"> <!-- function calc(amount){ document.mugcup.total.value = 498 * eval(amount); }//--> </script> </head> <body> <form name=mugcup> マグカップ(1個 税込498円:お一人様限定5個まで)<br> <hr> 個数: <select name ="num" onchange = "javascript:calc(this.value)"> <option value =0>0 <option value =1>1 <option value =2>2 <option value =3>3 <option value =4>4 <option value =5>5 </select> 小計: <input type="text" size="8" name="total">円<br> <hr> </form> </body> </html>

  • HTMLの表示で

    こんにちわ。 大学でプログラミングの入門の講義をとっているので自分で試しにコンボボックスのHTMLを作ってみました。 しかし、コンボボックスの中の数字を変えてみても計算結果がWeb上で表示されません。何度見直しても原因がわからないのです。 どうかご教授お願いします。 <html> <head> <title> プログラミング基礎 </title> <script language ="JavaScript"> function calc(){ total.value=498*num.value; } </script> </head> <body> マグカップ(1個 税込498円:お一人様限定5個まで)<br> <hr> 個数: <select name ="num" onchange ="calc()"> <option value =0>0 <option value =1>1 <option value =2>2 <option value =3>3 <option value =4>4 <option value =5>5 <select/> 小計: <input type="text" size="8" name="total">円<br> <hr> </body> </html> Web上ではこのようになりました。 ↓ C:\Documents and Settings\大野将宏\デスクトップ\プログラミング基礎\001-0.html

    • ベストアンサー
    • HTML
  • 見よう見まねで以下のように作成してみたのですが

    見よう見まねで以下のように作成してみたのですが 作動しませんでした。 (当方javascript初心者です) どこに問題があるのか、指摘してくださる方を探しています。 極めて初歩的なところで誤っているのだろうと思いますので 質問するのも恐縮なのですが・・・ どなたかよろしくお願いいたします。 ------------------------------------------ <HTML> <HEAD> <script language="JavaScript"> function calc(){ var a = document.form1.001.value; var b = document.form1.002.value; var c = document.form1.003.value; var d = document.form1.004.value; var total = a + b + c + d; document.form1.field.value = total; } </script> </HEAD> <BODY> <BR><BR> <form name="form1"> <Select name="001"> <Option value="10">case1 <Option value="20">case2 </Select>ケース <BR><BR> <INPUT size="15" type="text" name="002">number <BR><BR> <Select name="003"> <Option value="100">volume1 <Option value="200">volume2 <Option value="300">volume3 </Select>ボリューム <BR><BR> <Select name="004"> <Option value="0">N <Option value="50">size1 <Option value="100">size2 <Option value="150">size3 </Select>サイズ <BR><BR> <INPUT type="button" name="calc" value="計算" onClick="calc()"><BR><BR> <input size="15" readonly="readonly" name="field" type="text">total </form> </BODY> </HTML>

  • javascriptでフォームの値の計算

    javascript1か月目の初心者です。 7つのテキストフィールドに数値を代入させて合計と平均(最後には標準偏差)を計算しようと思ってます。 以下のように考えましたが、うまくいきません。 strが文字列として?扱われてしまっているようです。 strをevalで囲んでみてもダメです。 詳しい方教えてください。 <!--スクリプト1--> <SCRIPT LANGUAGE="JavaScript"> <!-- function f_check() { if(document.F1.num1.value!=""&&document.F1.num2.value!=""&&document.F1.num3.value!=""&&document.F1.num4.value!=""&&document.F1.num5.value!="" &&document.F1.num6.value!=""&&document.F1.num7.value!=""){ str=0 for(var i = 0;i<document.F1.length;i++){ str+=document.F1[i].value; } alert('合計は'+str+"です"); avrg = (str)/document.F1.length; alert('平均は'+avrg+'です'); //ここから標準偏差の計算(略)。 } // --> </SCRIPT> <form method="post" name="F1" onSubmit="return f_check()"> 数値を入れてください<input type="text" name="num1" size="5"><br> 数値を入れてください<input type="text" name="num2" size="5"><br> 数値を入れてください<input type="text" name="num3" size="5"><br> 数値を入れてください<input type="text" name="num4" size="5"><br> 数値を入れてください<input type="text" name="num5" size="5"><br> 数値を入れてください<input type="text" name="num6" size="5"><br> 数値を入れてください<input type="text" name="num7" size="5"><br> <INPUT TYPE=SUBMIT VALUE="平均をとる"></FORM>

  • form nameをform actionにしたいんですが・・・

    <html> <head> <title> 商品確認 </title> <script language ="JavaScript"> <!-- function calc(amount){ document.ball.total.value = 4095 * eval(amount); }//--> </script> </head> <body> <form name=ball method="post"> //←ここをform action="x.php"にしたい。 V4SLBL ソフトタッチ鈴入り4号球<br> <hr> 個数: <select name ="num" onchange = "javascript:calc(this.value)"> <option value =0>0 <option value =1>1 <option value =2>2 <option value =3>3 <option value =4>4 <option value =5>5 </select> 小計: <input type="text" size="8" name="total">円<br> <hr> </form> </body> </html> 上の場所をaction="x.php"にしてx.phpに小計を送ろうとしています。 しかし、actionにすると小計が表示されなくなります。 いろいろ考えましたが全く答えが出てきません。 アドバイスよろしくお願いします。

  • VBAでWebページに入力&ボタンクリック

    URLがhttp://xxx.com/のページで次のようなフォームのときExcelで自動入力クリックするマクロを作りたいです。 <input type="hidden" name="room" value="aaaaa"/> <a name="regist" id="regist">総登録数</a> <table width="402" border="1"> <tr> <th align="center" colspan="2"><div align="left"><big>登録ページ</big></div></th> </tr> <tr> <td colspan="2">&nbsp;&nbsp;&nbsp;name <input type="text" size="20" name="name" value="" maxlength="20"> &nbsp;&nbsp;&nbsp;Email <input type="text" size="20" name="email" value=""> &nbsp;&nbsp;</td> </tr> <tr> <td align="center">pass</td> <td><input type="text" size="20" name="pw" maxlength="12" value=""></td> </tr> <tr> <td align="center">category</td> <td><select size="1" name="junle"> <option value="pp" selected="selected">カテゴリ選択</option> <option value="0">その1</option> <option value="1">その2</option> </select></td> </tr> <tr> <td align="center">title</td> <td><input type="text" size="55" name="title" maxlength="25" value=""></td> </tr> <tr> <td align="center">URL</td> <td><input type="text" size="55" name="url"></td> </tr> <tr> <td align="center">intro</td> <td><input type="text" name="comment" size="55" maxlength="50" value=""></td> </tr> <tr align="center"> <td><br></td> <td><input type="submit" name="mode" value="登録"> <input type="reset" value="クリア"></td> </tr> </table> 入力する内容は1行目のA,B,C・・にname,email,pass・・・が順番にそれぞれ入っています。

  • Java 計算結果の表示ボックスの書式を変えたい

    計算結果が表示されるボックスの表示(回答(1)(2)(3)のみ)を下記のようなバリエーションで変えたいのですが、どのように記述すれば良いでしょうか。 (1)枠線の色を変えたい (2)枠線の太さを変えたい (3)枠線内(ボックス)を一定の時間で、任意の色で点滅させたい(現在は条件をつけて枠内の色が変わるように記述しています) よろしくお願い致します。 <HTML xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <TITLE>計算テスト</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <FONT SIZE="3"> <SCRIPT language="JavaScript"> <!-- function keisan1(x1,x2){ a=0.2*(eval(x1)/10)*(eval(x1)/10)*Math.sqrt(eval(x2))*1000; return a.toFixed(0);} function keisan2(x1,x2,x3,x4,s1){ b=eval(x2)+Math.pow((0.2*(eval(x1)/10)*(eval(x1)/10)*Math.sqrt(eval(x2))),2)*eval(document.getElementById('s1').value)*eval(x3)+0.1*eval(x4); return b.toFixed(2);} function keisan3(x1,x2){ c=20*(eval(x1)/10)*(eval(x1)/10)*(eval(x2)); return c.toFixed(0);} function calc(){ // ← 計算ボタンが押されたらこの関数が呼ばれる   var d1 = document.fk.d1;   var d2 = document.fk.d2;   var d3 = document.fk.d3;   var d4 = document.fk.d4;   var s1 = document.fk.s1;   var ans1 = keisan1(d1.value, d2.value);   var calc1 = document.fk.calc1;   calc1.value = ans1;   var ans2 = keisan2(d1.value, d2.value, d3.value, d4.value, s1.value);   var calc2 = document.fk.calc2;   calc2 .value = ans2 ;   if(ans2 >= 0) calc2.style.color = "#e60000";   if(ans2 >= 0) calc2.style.backgroundColor = "#ffffff";   if(ans2 >= 1.4) calc2.style.color = "#ffffff";   if(ans2 >= 1.4) calc2.style.backgroundColor = "#e60000";   var ans3 = keisan3(d1.value, d2.value);   var calc3 = document.fk.calc3;   calc3.value = ans3;   if(ans3 <180) calc3.style.backgroundColor = "#D5FFCB";   if(ans3 >=180) calc3.style.backgroundColor = "#FFCC99";   if(ans3 >=270) calc3.style.backgroundColor = "#FF9999"; } //--> </SCRIPT> <FONT SIZE="5"><B>計算</B></font><BR> <FORM name="fk"> <FONT SIZE="3">   ●条件(1):<INPUT size="7" type="text" name="d1" style="text-align:right"><BR>   ●条件(2):<INPUT size="7" type="text" name="d2" style="text-align:right"><BR>   ●条件(3):<SELECT name="s1" id="s1" onchange="b();"> <OPTION value="0.1">A</OPTION> <OPTION value="0.2">B</OPTION> </SELECT> <BR>   ●条件(4):<INPUT size="7" type="text" name="d3" style="text-align:right"><BR>   ●条件(5):<INPUT size="7" type="text" name="d4" style="text-align:right"><BR> <BR>   <INPUT type="button" value="計算開始" onclick="calc()"> <BR> <BR>   ◆回答(1):<INPUT size="7" type="text" name="calc1" style="text-align:right"><BR>   ◆回答(2):<INPUT size="7" type="text" name="calc2" style="text-align:right"><BR>   ◆回答(3):<INPUT size="7" type="text" name="calc3" style="text-align:right"><BR> <BR> </FONT> </FORM> </BODY> </HTML>

  • ボタンを押して計算結果を出したい

    下記のもの、うまくいきません。 どのようにしたらよいのでしょうか? 教えてください。よろしくお願いします。 <HTML> <HEAD> <TITLE>Calculator</TITLE> <SCRIPT language = "JavaScript"> function calc(Submit){ Num1 = document.foam1.Num1; Num2 = document.foam1.Num2; Ans = document.foam1.Ans; document.foam1.Ans.value = s1 Ans s2; } </SCRIPT> </HEAD> <PRE> 数値1 演算子 数値2 答え</PRE> <FORM METHOD=GET ACTION="/calc/calc.exe"> <INPUT NAME="Num1" VALUE="" onChange="calc()"> <SELECT NAME="Opr" SIZE=1 VALUE="" onChange="calc()"> <OPTION>+<OPTION>-<OPTION>*<OPTION>/</SELECT> <INPUT NAME="Num2" VALUE="" onChange="calc()"> = <INPUT NAME="Ans" VALUE="" onChange="calc()"> <INPUT TYPE="Submit" VALUE="計算"> </FORM> <H2></H2> </HTML>