• ベストアンサー

電卓の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; } 同様に２～９ </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>

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

  • ベストアンサー
  • leap_day
  • ベストアンサー率60% (338/561)
回答No.5

こんにちは 長くなりそうなのでサンプルコードは他の方同様に試してはないですが 電卓を創ってるのならこんな感じかな～？ 複雑な計算は試してないけどとりあえず計算できてると思う・・・ <script language="javascript"> <!-- function push(n) { num = document.getElementById("display").value; if(num == "0") num = ""; num0 = num + n; document.getElementById("display").value = num0; } function pushs(n) { num = document.getElementById("display").value; num1 = document.getElementById("pre").value; if (num == "" && num1 == "" || num == "0") return false; else document.getElementById("display").value = num + n; } function calc(n) { if(document.getElementById("display").value == "") return false; document.getElementById("pre").value = document.getElementById("display").value; document.getElementById("pre1").value = ""; document.getElementById("sisoku").value = n; document.getElementById("display").value = ""; } function equal() { if(document.getElementById("sisoku").value == "/" && document.getElementById("display").value == "0") {return false;} if(document.getElementById("pre1").value == "" ) { document.getElementById("pre1").value = document.getElementById("display").value;} else { document.getElementById("pre").value = document.getElementById("display").value; } if(document.getElementById("pre").value == "") return false; if(document.getElementById("pre1").value == "") return false; i = eval(document.getElementById("pre").value); j = eval(document.getElementById("pre1").value); k = document.getElementById("sisoku").value; n = eval(i + k + j); document.getElementById("display").value = ""; document.getElementById("display").value = n; } function cl() { document.getElementById("display").value = ""; document.getElementById("pre").value = ""; document.getElementById("pre1").value = ""; document.getElementById("sisoku").value = ""; } //--> </script> <style type="text/css"> div { width:150px; text-align:center; background-color:gray; } .input { width:25px; } </style> </head> <body> <div> <hr><br> <input type = "button" value ="7" class="input" onclick = "push(7)"> <input type = "button" value ="8" class="input" onclick = "push(8)"> <input type = "button" value ="9" class="input" onclick = "push(9)"> <input type = "button" value ="+" class="input" onclick = "calc(this.value)"> <br><br> <input type = "button" value ="4" class="input" onclick = "push(4)"> <input type = "button" value ="5" class="input" onclick = "push(5)"> <input type = "button" value ="6" class="input" onclick = "push(6)"> <input type = "button" value ="-" class="input" onclick = "calc(this.value)"> <br><br> <input type = "button" value ="1" class="input" onclick = "push(1)"> <input type = "button" value ="2" class="input" onclick = "push(2)"> <input type = "button" value ="3" class="input" onclick = "push(3)"> <input type = "button" value ="*" class="input" onclick = "calc(this.value)"> <br><br> <input type = "button" value ="0" class="input" onclick = "pushs(0)"> <input type = "button" value ="=" class="input" onclick = "equal()"> <input type = "button" value ="C" class="input" onclick = "cl()"> <input type = "button" value ="/" class="input" onclick = "calc(this.value)"> <br><br> <hr> <input type="hidden" id="pre"> <input type="hidden" id="sisoku"> <input type="hidden" id="pre1"> <input type="text" style="width:100px" id="display"> <br><hr> </div> あと文字盤の配列に小数点がなかったので無視しましたけど（『C』はクリアボタンですよね？）つけるのであれば function pushc(n) { num = document.getElementById("display").value; if (num.match(/\./))return false; if(num == "") {num = 0; } num0 = num + n; document.getElementById("display").value = num0; } <input type="button" value="." class="input" onClick="pushc(this.value)"> を新規に付け加えて function equal(n) { } 内の n = eval(i + k + j);の後ろに n = Math.round(n*1000000)/1000000; を付け加えてください（小数第6位まで表示します）

その他の回答 (4)

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

＃１です 文法ミスと、指摘を反映させたソースです。 めんどうなので細かくは検証していませんが、とりあえず、０と１と 四則演算は動いているみたいですね。 それとあくまでも元ソースをいかしたものですので、基本的には 手をいれてません。そもそも私ならこんな書き方をしませんので・・・ まぁ初心者ということでがんばってください。 <html> <head> <title> 電卓 </title> <script language = "JavaScript"> window.onload=function(){ display=document.getElementById('display'); } 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; } //同様に２～９ </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" id="display">&nbsp <br><br><hr><br> </body> </html>

回答No.3

ん、#2のコードだとまだ不完全っぽい 6*= 6/= とかしょっぱな打つと0とかInfinityが表示される 正しくは両方とも6が表示されること。 明日ちょっと考えてみよう。今日は眠い。

rinnshan
質問者

お礼

う～ん、何のことを言っているのでしょうかね？ 初心者ですみませんm(_ _)m

回答No.2

Q3120678-2.html ================================================ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>テスト</title> <style type="text/css"> dt,dd{ height:2ex; } </style> <script type="text/javascript" src="Q3120678-2.js"></script> </head> <body onload="init();"> <h1>電卓</h1> <p>元のソースが冗長で直しようがないくらい酷かったので何だかよくわからなかったので参考にせずに作り直してみた。</p> <p>Minefield/Firefox 3.0a6preとOpera9.21で動作確認済み</p> <table> <caption>電卓のキー</caption> <tbody> <tr> <td><input type="button" value="7" onclick="stack(this.value);" /></td> <td><input type="button" value="8" onclick="stack(this.value);" /></td> <td><input type="button" value="9" onclick="stack(this.value);" /></td> <td><input type="button" value="+" onclick="switchIndex(this.value);"/></td> </tr> <tr> <td><input type="button" value="4" onclick="stack(this.value);" /></td> <td><input type="button" value="5" onclick="stack(this.value);" /></td> <td><input type="button" value="6" onclick="stack(this.value);" /></td> <td><input type="button" value="-" onclick="switchIndex(this.value);" /></td> </tr> <tr> <td><input type="button" value="3" onclick="stack(this.value);" /></td> <td><input type="button" value="2" onclick="stack(this.value);" /></td> <td><input type="button" value="1" onclick="stack(this.value);" /></td> <td><input type="button" value="*" onclick="switchIndex(this.value);" /></td> </tr> <tr> <td><input type="button" value="0" onclick="stack(this.value);" /></td> <td><input type="button" value="=" onclick="switchIndex(this.value);"/></td> <td><input type="button" value="C" onclick="clean();" /></td> <td><input type="button" value="/" onclick="switchIndex(this.value);" /></td> </tr> </tbody> </table> <dl> <dt>式(ただし乗除が優先されない)</dt> <dd id="formula"> </dd> <dt>答え</dt> <dd id="answer"> </dd> </dl> </body> </html> ========================================== Q3120678-2.js ========================================= var operand; var TargetOperandIndex; var OperationIndex = "+"; var Answer; var Formula; var equalafter = true; /* 全てのtextContentをinnerTextに書き換えたらIE 7でも動作する。*/ function init(){ operand = new Array(2); Answer = document.getElementById("answer"); Formula = document.getElementById("formula"); equalafter = 0; clean(); }; function clean(){ operand[0] = 0; operand[1] = 0; result = 0; TargetOperandIndex = 0; OperationIndex = 0; Answer.textContent = ""; Formula.textContent = ""; equalafter = false; }; function stack(num){ if(equalafter == true){ clean(); } operand[TargetOperandIndex] = 10 * operand[TargetOperandIndex] + parseInt(num); Formula.textContent = Formula.textContent + num; Answer.textContent = operand[TargetOperandIndex]; }; function switchIndex(Index){ Formula.textContent = Formula.textContent + Index; TargetOperandIndex = TargetOperandIndex + 1; if (TargetOperandIndex == 2||Index == "="){ operand[0] = operation(); operand[1] = 0; Answer.textContent = operand[0]; TargetOperandIndex = 1; } if (Index == "="){ equalafter = true; } else { equalafter = false; } OperationIndex = Index; }; function operation(){ switch (OperationIndex) { case "+": return operand[0] + operand[1]; break; case "-": return operand[0] - operand[1]; break; case "*": return operand[0] * operand[1]; break; case "/": return operand[0] / operand[1]; break; case "=": return operand[0]; break; } };

rinnshan
質問者

お礼

これはすごいです(・_・; しかし、私はプログラミングの基礎しかかじっていないので、 できるだけ文型を変えてほしくはなかったです。 しかも、答えのコンボボックスがなかったのですが、どういうこと でしょうか？

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

あきらかな文法ミスは２点。 ×list = new Array( "0", "0","0","0","0",); ○list = new Array( "0", "0","0","0","0"); ×sum+ =list[i]*temp; ○sum +=list[i]*temp; ※これは２箇所ありますね。 それと、 display.value=sum; とあるのですが、displayを<input type = "text" size ="10" name = "display"> と認識させるのはきびしいですね。 せめて <input type = "text" size ="10" name = "display" id="display"> として、 document.getElementById('display').value=sum; としてください

rinnshan
質問者

お礼

ご回答ありがとうございました。 list = new Array( "0", "0","0","0","0");とsum +=list[i]*temp;と ついでにcount+=1;もcount +=1;に改変しました。 しかし、やはり「ページにエラーが発生しました」となってしまいますね(^_^; <input type = "text" size ="10" name = "display" id="display"> として、document.getElementById('display').value=sum;とするのが よくわからないのですが・・どういうことでしょうね？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 電卓のJavaScriptで

    大学でプログラミング基礎の講義を取っているのですが、そこで配られたテキストをなぜそうなるのか理解できなかったのでご教授お願いします。 電卓のJavaScriptなのですが、 <script language = "JavaScript"> count = 0; sum = 0; num = 0; flag = 0; list = new Array( "0", "0", "0", "0", "0" ); これはグローバル変数ですべてのfunctionに適応させるためのものだと 思うのですが、sum = 0;num = 0;というのはこのJavaScriptでどのような 意味を持ったものなのでしょうか？ function clist( ) { for( i = 0 ; i < 5 ; i++ ) { list[ i ] = 0; } } このlist[ i ] = 0;というのは配列変数を使っているのですが、何を意味しているのでしょうか？ また、このループを使うことによってどのような意味があるのでしょうか？ function aclear( ) { count = 0; sum = 0; num = 0; flag = 0; clist( ); display.value = 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; } これらのcalc１からcalc4のなかの式の意味がよくわかりません(>_<) function equal( ) { if(flag == 1) { sum = num + sum; } else if(flag == 2) { sum = num - sum; } else if(flag == 3) { sum = num * sum; } else if(flag == 4) { sum = num / sum; } else { aclear( ); } 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; } list[count] = 1; 以下同様に function push9 まで続く。 ちょっと長すぎるので、全部書きたかったのですが、無理でした。 正直さっぱりなので、困っています。

  • javascriptで電卓を作成

    プログラミングをまったくやったことがない状態から、ドットインストールやテックアカデミーのHTML,CSS,Javascriptの入門動画をすべて見終わった段階ですので、 基本的な仕組みと関数やfor文、if文、while文、などについてくらいは理解しています。 今回、javascriptを使って電卓のシステムを組む、という課題があり、 ネットで検索してやってみてはいるのですが行き詰っています。 最初は以下のような形で作成をしていました。 <body> <form name="myform"> 　<table border="1"> <tr> <td colspan="4"> <input type="text" name="result" value="" id="result"> </td> </tr> <tr> <td><input type="button" value="　"onclick="calc(' ')" ></td> <td><input type="button" value="％"onclick="calc('%')"></td> <td colspan="2"> <input type="button" value="AC" onclick="calc('AC')"></td> </tr> <tr> <td><input type="button" value="７" onclick="calc('７')"></td> <td><input type="button" value="８" onclick="calc('８')"></td> <td><input type="button" value="９" onclick="calc('９')"></td> <td><input type="button" value="÷" onclick="calc('÷')"></td> </tr> <tr> <td><input type="button" value="４"onclick="calc('４')" ></td> <td><input type="button" value="５"onclick="calc('５')" ></td> <td><input type="button" value="６"onclick="calc('６')"></td> <td><input type="button" value="×" onclick="calc('×')"></td> </tr> 　 <tr> <td><input type="button" value="１" onclick="calc('１')" ></td> <td><input type="button" value="２" onclick="calc('２')"></td> <td><input type="button" value="３" onclick="calc('３')"></td> <td><input type="button" value="－" onclick="calc('－')"></td> </tr> <tr> <td><input type="button" value="０" onclick="calc('０')" ></td> <td><input type="button" value="＋" onclick="calc('＋')"></td> <td colspan="2"> <input type="button" value="＝" onclick="calc('＝')"></td> </tr> </form> <script> function calc(a) { if (a === "=") { document.myform.kekka.value = eval(document.myform.kekka.value); } else if (a === "AC") { document.myform.kekka.value = ""; } else { document.myform.kekka.value += a; } </script> </body> </html> ですが、onclickとevalを使わず、代わりに「addEventListner」を用いるよう指示されました。 「addEventListner」に関しては、検索してなんとかざっと理解したのですが、それ以前に、電卓の基本的な関数の組み方を理解していないため、いまいちどこから手をつけたらいいかわかりません。 いろんなサイトを見ているといろんなやり方がでてきますが、ope=+,やflag=0などの表記をよく見かけます。が、この意味もいまいちわかっていません。。 初心者すぎるので、何かアドバイスをいただけますと幸いです。 宜しくお願いいたします。 また、このような初心者が使いこなせるようになるために向いている動画や書籍、ページがありましたら教えていただけますと助かります。

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

    こんばんわ。これは古い型のプログラミングかもしれませんが、 講義でもやっているので、ＦＯＲＭタグが無くても動作はするようです。 しかし、プログラミングを自分で作ってみても全く動作しません(>_<) 具体的にどこがおかしいため動作が行われないのか、教えてください。 新しいタグを加えなくても講義では動作してますし、このまま 自分で眺めていても全く先に進みません。 よろしくお願いいたします。 <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> ティーカップ１セット（カップ＆ソーサー）税込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で電卓を作って一応完成はした

    のですが、分からないコードがあります。以下のコードです。 ～HTML～ <form name="dentaku"> <input type="text" name="line" value="0"> <input type="button" value="Ｃ" onclick="cl()"> <input type="button" value=" ７ " onclick="val(7)"> <input type="button" value=" ８ " onclick="val(8)"> <input type="button" value=" ９ " onclick="val(9)"> <input type="button" value="÷" onclick="keisan('/')"> <input type="button" value=" ４ " onclick="val(4)"> <input type="button" value=" ５ " onclick="val(5)"> <input type="button" value=" ６ " onclick="val(6)"> <input type="button" value="×" onclick="keisan('*')"> <input type="button" value=" １ " onclick="val(1)"> <input type="button" value=" ２ " onclick="val(2)"> <input type="button" value=" ３ " onclick="val(3)"> <input type="button" value="－" onclick="keisan('-')"> <input type="button" value=" ０ " onclick="val(0)"> <input type="button" value=" ・ " onclick="val('.')"> <input type="button" value=" ＋ " onclick="keisan('+')"> <input type="button" value="＝" onclick="keisan('=')"> </form> ～JavaScript～ total = 0; input = ""; ope = "+"; flg = 1; function val(data) { flg = 0; input += data; document.dentaku.line.value = input; } function keisan(data) { if (flg == 0) { flg = 1; cf = total + ope + input; total = eval(cf); input = ""; document.dentaku.line.value = total; } if (data == "=") { total = 0; ope = "+"; } else { ope = data; } } function cl() { total = 0; ope = "+"; input = ""; document.dentaku.line.value = total; } 関係のないコードは省略してあります。また、CSSも省略しますが、テーブル要素を使わず以下の画像のようにインライン要素(input要素)の性質を利用して回り込みをさせています。 長くなりましたが、そこで質問なのですが、 (1)変数ope(operandの略)なのですが、初期値は+なのに演算子ボタン(上記のHTMLコード)をクリックすると、なぜ値がその演算子に変わるのか理由を教えて下さい。 何となく理由は分かりますが、はっきりと理解したいです。 (2)上記のHTMLコードをもっと簡単に書けませんか？ 特にonclickをボタンの数だけ書くのは手間です。

  • javascript 乱数が取得できない

    はじめまして。 一月ほど前から「パズルネット　ソフィア」 http://www.pori2.net/js/number/4.html というサイトでjavascriptの基礎を学んでいるのですが、乱数 を扱う段階になって自分の作成したプログラム（以下） <html> <head> </head> <body onload="Mondai()"> <form name="quiz"> <input type="text" value="" > <input type="button" value="赤" onclick="Push(0)"> <input type="button" value="青" onclick="Push(1)"> <input type="button" value="黄" onclick="Push(2)"> <input type="button" value="緑" onclick="Push(3)"> <input type="button" value="白" onclick="Push(4)"> </form> <script type="text/javascript"> <!-- var col=new Array("red","bleu","yellow","green","white"); var Rnd; function Mondai(){ Rnd=Math.floor(Math.random() * 5 ); document.quiz.element[0].value=col[Rnd]; } function Push(num){ var n=parseInt(num); if( n==Rnd ){ Mondai(); }else{ alert("違います。"); } } // --></script> </body> </html> を実行してもテキストボックス内に何の値も表示されず 、ボタンを押しても「違います。」とだけしか出てきません。 ブラウザはfirefoxを使用しており、javascriptの設定もonに なっています。 カンマや鍵括弧などの記号にも打ち間違いがないかサンプル プログラムを参考にしながら確認してみたのですが、どこにも おかしな点はありませんでした。 サンプルプログラムは下記のとおりで、こちらは正常に実行されます。 <body onload="Mondai()"> <form name="quiz"> <input type="text" value=""> <input type="button" value="赤" onclick="Push(0)"> <input type="button" value="青" onclick="Push(1)"> <input type="button" value="黄" onclick="Push(2)"> <input type="button" value="緑" onclick="Push(3)"> <input type="button" value="白" onclick="Push(4)"> </form> <script type="text/javascript"> <!-- //色名の英単語を配列に入れる var col=new Array("red","blue","yellow","green","white"); //乱数を入れる変数 var Rnd; //テキストボックスに問題文（色名）を表示する関数 function Mondai(){ //0～4までの乱数を発生させる Rnd=Math.floor( Math.random() * 5 ); document.quiz.elements[0].value=col[Rnd]; } //正誤判定関数 function Push(num){ //引数を数字に変換 var n=parseInt(num); //正解なら次の問題を表示、間違っていたらアラートを表示する if ( n == Rnd ){ Mondai(); }else{ alert("違います！"); } } // --> </script> どなたかアドバイスをいただけないでしょうか？ よろしくお願いします。

  • Javascriptを短くしたい

    初歩的なことですみません。 Javascriptで表示／非表示を切り替えるものを作ろうと思うのですが、 以下のサンプル文のような形では、項目数が増えるとその分だけ どんどんJavascriptも長くなっていってしまいます。 Javascript文を簡潔にするには、どのように記述すればよいのでしょうか。 よろしくお願いします。 <script type="text/javascript"> <!-- function Hyo1(num) { if (num == 0) { document.getElementById("cont1").style.display="block"; } else { document.getElementById("cont1").style.display="none"; } } function Hyo2(num) { if (num == 0) { document.getElementById("cont2").style.display="block"; } else { document.getElementById("cont2").style.display="none"; } } // --> </script> <div id="cont1">ああああああ</div> <form> <input type="button" value="表示" onclick="Hyo1(0)"> <input type="button" value="非表示" onclick="Hyo1(1)"> </form> <form> <div id="cont2">いいいいいい</div> <input type="button" value="表示" onclick="Hyo2(0)"> <input type="button" value="非表示" onclick="Hyo2(1)"> </form>

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

    プログラミング初心者なのですが、うまく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> マグカップ（１個 税込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> ティーカップ（１セット税込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>

  • javascriptのtextbox

    こんばんは。 <html> <body> <center> <br><br> <form name="fuji"> TEXT BOX<br> <input type="text" name="tex"> </form> <SCRIPT type="text/javascript"> var i; i="ABC" document.write("<input type='button' value='↑を変数iに代入' onClick='i=(document.fuji.tex);'>"); document.write("<br><input type='button' value='表示' onClick='document.write(i);'>"); </SCRIPT> </center> </body> </html> でテキストボックスの中身を表示させたいのですが、 上手くいきません。どうすればいいのでしょうか。 また、変数を使わずに直接テキストボックスの中身を 表示させる事はできるのでしょうか。 教えてください。

  • javascriptで無効化

    javascriptの勉強中でクイズを作っています。 3択クイズでボタン式になっていて押すとそれぞれ正解・不正解と 問題に対する解説を表示させることは出来ました。 また、次へボタンで次の問題にも進めます。 しかし、ボタンな為、何度でも押せてしまい、正解が出るまで出来る上、 hiddenで隠して正解・不正解と解説が出てしまいます。 そこで、1つのボタンを押したら残り2つのボタンを無効化して 次へボタンしか押せない状態にしたいと思っています。 <div id="s1" class="hid"> <p>hogehogehoge?</p> <a href="#" onclick="return ChDsp2('hz1','textALL');"><input type="button" value="1-1" onclick="hazure();" /></a><br /> <a href="#" onclick="return ChDsp2('hz1','textALL');"><input type="button" value="1-2" onclick="hazure();" /></a><br /> <a href="#" onclick="return ChDsp2('sk1','textALL');"><input type="button" value="1-3" onclick="seikai();" /></a> </div> <div id="hz" class="hid"> <p>不正解&nbsp;×</p> <div id="hz1" class="textALL">【解&nbsp;説】hogehoge <input type="button" value="次へ" onclick="nextq();" /> <div id="sk" class="hid"> <p>正解&nbsp;×</p> <div id="sk1" class="textALL">【解&nbsp;説】hogehoge <input type="button" value="次へ" onclick="nextq();" /> この様になっていますが、どうか回答を選択(ボタンを押した)したら 他の問題を押せなくし、解説を表示させたまま次へボタンを押し、 次の問題に進む方法を教えて下さい。お願いします。

  • 電卓をつくったのですが

    <script type="text/javascript"> <!-- var to=0; var inp=""; var cal="+"; var flg=1; function df(a){ flg=0; inp+=a; document.ad1.z.value= inp; } function df1(a){ if(flg==0){ flg=1; var don=to+cal+inp; to=eval(don); inp=""; document.ad1.z.value=to; } if(a=="="){ to=0; cal="+"; }else{ cal=a; } } function df3(){ to=0; cal="+"; inp=""; document.ad1.z.value=to; } --> </script> </head> <body> <div id="s1"> <div id="s2"> <form name="ad1"> <table> <tr><td colspan="4">電卓</td></tr> <tr><td colspan="3"><input type="text" size="12px" name="z" value="0"></td> <tr> <td><input type="button" name="ad7" value="7" onClick="df(7)"></td> <td><input type="button" name="ad8" value="8" onClick="df(8)"></td> <td><input type="button" name="ad9" value="9" onClick="df(9)"></td> </tr> <tr> <td><input type="button" name="ad6" value="6" onClick="df(6)"></td> <td><input type="button" name="ad5" value="5" onClick="df(5)"></td> <td><input type="button" name="ad4" value="4" onClick="df(4)"></td> </tr> <tr> <td><input type="button" name="ad3" value="3" onClick="df(3)"></td> <td><input type="button" name="ad2" value="2" onClick="df(2)"></td> <td><input type="button" name="ad11" value="1" onClick="df(1)"></td> </tr> <tr> <td><input type="button" name="add1" value="+" onClick="df1(+)"></td> <td><input type="button" name="add2" value="-" onClick="df1(-)"></td> <td><input type="button" name="add3" value="×" onClick="df1(*)"></td> </tr> <tr> <td><input type="button" name="add4" value="÷" onClick="df1(/)"></td> <td><input type="button" name="add5" value="=" onClick="df1(=)"></td> <td><input type="button" name="add6" value="." onClick="df1(.)"></td> <td><input type="button" name="add7" value="c" onClick="df3()"></td> </tr> </table> </form> </div> </div> </body> </html> クリアーは上手くいったんですが 計算ができませんでした。 どこがいけないのでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する