javascriptの計算結果をweb上に表示

2023/09/04 16:31

このQ&Aのポイント

javascript上で入力した数値から和と積を計算し、ブラウザ上に表示するコードを作成したい。
スクリプト2では、スクリプト1を改造して和と積の結果を表示するようにしましたが、うまく動作しない。
修正した部分に関して、パーツの入力方法について教えてほしい。

ベストアンサー

javascriptの計算結果をweb上に表示

2013/02/16 09:29

WEB上で入力した数値から複数の計算をさせ、それをフォームからcgiに送るjavascriprを組みたいと思っています。【現在保有のスクリプト】下記のスクリプト1では、text1 text2 欄に数値を入力した後、「計算」ボタンを押し、送信ボタンを押すと、計算結果をcgiに送ることが可能です。（下記の場合は、「入力数値の和」と「積」の2つの数値の送信する) 【やりたいこと】 text1 text2 欄に数値を入力した後、「計算」ボタンを押したあとに、「和と積がブラウザ上に表示され、確認した後に「送信ボタン」を押せるようにしたい。ということで、修正したのがスクリプト2です。【質問事項】スクリプト2では、スクリプト1をベースに javascript上に msg.innerHTML = msg; msg2.innerHTML = msg2; を加え、 HTML上に <p id="msg"></p> <p id="msg2"></p> を加えていますが、これでは動きません。上記に加え function readText() { var text1 = document.getElementById(""); などのパーツを入力する必要があるはずだと思うのですが、いろいろな場所に試行錯誤しておりますが、うまくいきません。ご教示いただきたくお願いいたします。【スクリプト1】************************************************ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test</title> <script type="text/javascript">  </script> </head> <body> <form action="form30.cgi" method="post" name="form2" id="form2"> <fieldset> <input type="text" id="text1" name="text1" size="10" maxlength="10" />+ <input type="text" id="text2" name="text2" size="10" maxlength="10" /> <input type="button" value="計算" name="calc" /> <br> <input type="hidden" name="plus" value=""> <input type="hidden" name="plus2" value=""> <input type="submit" value="送信" /> </fieldset> </form> </body> </html> **************************************************************** 【スクリプト2】上記を改造しweb上で計算結果を表示させたい******** <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test</title> <script type="text/javascript">  </script> </head> <body> <form action="form30.cgi" method="post" name="form2" id="form2"> <fieldset> <input type="text" id="text1" name="text1" size="10" maxlength="10" />+ <input type="text" id="text2" name="text2" size="10" maxlength="10" /> <input type="button" value="計算" name="calc" /> <br> <input type="hidden" name="plus" value=""> <input type="hidden" name="plus2" value=""> <p id="msg"></p> <p id="msg2"></p> <input type="submit" value="送信" /> </fieldset> </form> </body> </html> ****************************************************************

tajix14
お礼率72% (175/242)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

Gaffgarion
ベストアンサー率45% (45/99)

2013/02/16 12:08 回答No.1

msg.innerHTML = msg; msg2.innerHTML = msg2; の代わりに以下。 var p1 = document.getElementById('msg'); var p2 = document.getElementById('msg2'); if (p1.textContent !== undefined){ p1.textContent = msg; p2.textContent = msg2; }else{ p1.innerText = msg; p2.innerText = msg2; } textContentとinnerTextは少し違いますが、あまり気にしなくてもいいかもしれません。詳しくは以下。 http://d.hatena.ne.jp/cou929_la/20110517/1305644081 今回のtextContentと、あとクリックイベントの追加の部分は実装による違いで分岐をしていますが、そういったところはjqueryなどのDOM操作補助ライブラリを使うと、随分とすっきりします。

質問者

お礼 2013/02/16 17:54

素早いご回答有難うございます。お陰さまで当方の考えているものを作ることが出来ました。大変助かりました。本当にありがとうございました。

関連するQ&A

javascriptの計算結果をvalue=""に
javascriptの計算結果をフォームの中のvalue=""内部に表示し、送信できるようにしたいというのが質問の趣旨です。　　　　　　　　　　　　　　　　記下記の2つのファイルで、フォームから入力した数値同士の「足し算の結果」を表示できます。（HTMLファイル下段　<p id="message"></p>の部分で表示します。） ******************************************** 【HTML】 <script language="JavaScript" type="text/javascript" src="js/culc.js"></script> <form name="f1"> <input type="text" id="text1" name="text1" size="10" maxlength="10" />+ <input type="text" id="text2" name="text2" size="10" maxlength="10" /> <input type="button" value="足す" onclick="readText()" /> </form> <p id="message"></p> ******************************************* 【JAVASCRIPT(culc.js)】 function readText() { var text1 = document.getElementById("text1"); var text2 = document.getElementById("text2"); var message = document.getElementById("message"); var str_val1 = text1.value; var str_val2 = text2.value; var sum; if (isNaN(str_val1) || str_val1 == "" || isNaN(str_val2) || str_val2 == "") { textMessage = "数値以外の文字が入っています"; } else { //sum = str_val1 + str_val2; sum = parseFloat(str_val1) + parseFloat(str_val2); textMessage = "合計は、" + sum + "です"; } message.innerHTML = textMessage; } ************************************************ 【質問】次にこのHTMLを改造し、フォームから計算値を送信することとしました。 ************************************************ 【HTML】 <script language="JavaScript" type="text/javascript" src="js/culc.js"></script> <form name="f1"> <input type="text" id="text1" name="text1" size="10" maxlength="10" />+ <input type="text" id="text2" name="text2" size="10" maxlength="10" /> <input type="button" value="足す" onclick="readText()" /> </form> <form action="form.cgi" method="post" name="form2" id="form2"> <input type="hidden" name="plus" value="<p id="message"></p>"> <input type="button" value="送信" onClick="disableButton()" name="button1"> </form> ************************************************ 問題点上記のように、計算結果を表示出来るはずの<p id="message"></p>を送信フォームのvalue=の直後に記載しただけなのですが、なぜか送れません。 <p id="message"></p>　を独立して記載しているときは計算値をそのまま表示していたのですが、value="<p id="message"></p>">　と　value=　の中に記載した瞬間に単なる文字の羅列になってしまうようです。 value="<p id="message"></p>"> value='<p id="message"></p>'> value="<p id='message'></p>"> value='<p id='message'></p>'> と試してみましたが、いずれもうまきませんでした。どのようにすれば、value=""　の中に計算結果が入るか教えてください。宜しくお願い致します。
- ベストアンサー
- JavaScript
計算結果の表示方法について
お世話になります。 Java Scriptの記述方法で教えてください。下記のフォームを作りました。テキストボックスに目標タイムを4時間30分であれば4.5と入力することで必要な時速とキロ当たりのペースを出すようにしています。 2行に渡り、キロ当たりのペースを分と秒で出ていますがが、これを○分○秒と1行に表示させたいのです。どなたかお知恵をお願いします。 <html> <head> <script type="text/javascript"> function calc(frm) { var result = Math.round(42.195 / (parseFloat(frm.elements["a"].value))*10) / 10; document.getElementById('result_1').getElementsByTagName('span')[0].innerHTML = result; result = Math.floor(parseFloat(frm.elements["a"].value) / 42.195 * 60); document.getElementById('result_2').getElementsByTagName('span')[0].innerHTML = result; result = Math.round(parseFloat(frm.elements["a"].value) / 42.195 * 60*60)%60; document.getElementById('result_3').getElementsByTagName('span')[0].innerHTML = result; result = Math.round(1 / 42.195 * 5 * parseFloat(frm.elements["a"].value) *100) /100; document.getElementById('result_4').getElementsByTagName('span')[0].innerHTML = result; } </script> </head> <body> <form> <input type="text" name="a"> <input type="button" value="計算" onClick="calc(this.form)"><br> 計算結果<br> <div id="result_1">時速　　　　　 <span></span>km/h</div> <div id="result_2">キロペース　　<span></span>分</div><div id="result_3">　　　　　　　<span></span>秒</div> <div id="result_4">5km　　　　　　<span></span>時間</div> </form> </body>
- ベストアンサー
- JavaScript
同じFunctionで、同じ計算させたいのですが
私は今、以下のようにここで教えていただいたプログラムを参考に組んでは見たものの、同じ行をいくつもコピペすると計算されなくなってしまいます。1行だけの計算でしようとするとうまく計算されるのですが・・・ <HTML> <HEAD> <TITLE> タイトルバーに表示されるテキスト </TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <FORM NAME="sum" onSubmit="SUM();return false;"> A<INPUT TYPE="text" NAME="text1" onChange="SUM()" SIZE="10"><BR> B<INPUT TYPE="text" NAME="text2" onChange="SUM()" SIZE="10"><BR> C<INPUT TYPE="text" NAME="text3" onChange="SUM()" SIZE="10"><BR> D=A+B-C<INPUT TYPE="text" NAME="text4" onChange="SUM()" SIZE="10"><BR> E<INPUT TYPE="text" NAME="text5" onChange="SUM()" SIZE="10"><BR> F<INPUT TYPE="text" NAME="text6" onChange="SUM()" SIZE="10"><BR> G=D+E+F<INPUT TYPE="text" NAME="text7" onChange="SUM()" SIZE="10"><BR> </FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
JavaScriptの計算式を添削してください。
250×変数Ａ＋200×変数Ｂ＋150×変数Ｃ＝合計という計算をしたくて過去の質問をヒントに自分なりに工夫して作成いたしました。（JavaScriptは超初心者）変数Ａ～Ｂには整数が入ります。自分で動作を確認したところ問題無く動くようですが、何か問題がないか心配です。これでいいのか、間違っているところがないか確認願いますでしょうか。 <HTML> <HEAD> <SCRIPT language="JavaScript">  </SCRIPT> <TITLE></TITLE> </HEAD> <BODY> <FORM name="f"><INPUT type="text" name="t1" onkeyup="calc()" value="0"><INPUT type="text" name="t2" onkeyup="calc()" value="0"><INPUT type="text" name="t3" onkeyup="calc()" value="0"> ＝ <INPUT type="text" name="t4"></FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
javascript
ある文字を入力して、文字を返すロジックですが、ボックスを作成して入力を行いたいです。以下のロジックだと、hogeのvalueに文字を入力すると、文字はボックスに返されますが、 valueをスペースにして、value="" htmlで画面上で、文字を入力して、submitを実行しても、文字は返されません。文字が引き渡されたないのが原因だと思われますが、 submitでどのようにして文字を引き渡してよいか、教えて頂けないでしょうか。宜しくお願いします。 <form id="sample"> <input type="text" id="hoge" name="hoge" value="pass" size="30"> <input type="text" id="foo" name="foo" value="" size="100"> <INPUT type="submit" value="変換"> <script language="javascript"> (function () { function test(p){var 省略 charAt(i);}return s;} var elements = document.getElementById('sample').elements; elements['foo'].value = test(elements['hoge'].value); }()); </script>
- ベストアンサー
- JavaScript
javascriptでのアラート表示
javascriptで大変困っております。ラジオボタン・テキストエリアにまたがったチェックアラートをだしたいのですが、うまくいきません。 <script> function form_check(f) { if (f.Q1.value == "") { alert("・未記入です！"); return false; } ・・・ if (f.Q6.value == "") { alert("・名前が未記入です！"); return false; } else return true; } function reset_conf() { if (confirm("フォーム内容をリセットします！\n\nよろしいですか？")) return true; else return false; } </script> -------- <FORM ACTION="hogehoge.cgi" METHOD="POST" onSubmit="return form_check(this)"> 教育:<INPUT TYPE="radio" NAME="Q1" VALUE="OK"> テスト:<INPUT TYPE="radio" NAME="Q2" VALUE="OK">　アンケート:<INPUT TYPE="radio" NAME="Q3" VALUE="OK"> AAA:<input name="Q4" type="text" /> BBB:<input name="Q5" type="text" /> CCC:<input name="Q6" type="text" /> <INPUT TYPE="hidden" NAME="number" VALUE="6"> <INPUT TYPE="submit" NAME="answer" VALUE="送信する"> <INPUT TYPE="reset" NAME="reset" VALUE="リセット"> </FORM> </form> ------- テキストエリアのアラートチェックは出来ない状態です。すべてにチェックまたは、テキスト入力がされていないと送信できないようにしたいのです。どうしたらよいでしょうか？
- 締切済み
- JavaScript
alert表示で計算結果がうまく表示しません
alert表示で計算結果がうまく作動しません。全問正解しても『０』と表示されてしまいます。 for文がうまくいっていないのだと思いますがどう解決していいのか、まったく解りません。おわかりになる方がいらっしゃいましたら教えて下さい。 <script language="JavaScript">  </script> <form name="Frm_Q"> <input type="radio" name="Q[1]" value="Y">はい<input type="radio" name="Q[1]" value="n">いいえ<br>＃＃＃Q５まで続く＃＃＃ <input type="button" value="　採　点　" onClick="func()"> <input type="reset" value="リセット"> </form>
- 締切済み
- JavaScript
javascriptでフォーム要素の状態を制御
いつもお世話様です。 phpでフォームを構成しています。フォーム内のradioボタンの状態で、以降のラジオボタン、プルダウン、テキスト入力を制御したいです。＜制御内容（やりたいこと）＞ situmon.phpで、 q1のラジオボタンが1の場合は、q2は回答しなくていい。（2の場合だけ回答させる。） q3のチェックボックスが1でない場合は、プルダウンとテキストは入力しなくていい。（1の場合だけ回答させる。）＜現状のソース＞ちなみに、該当するjavascript部分は、いろいろなサイトをみて、いろいろ書き換えて試しましたが、どうもうまくいかず、断念した段階そのままの状態です。よって、ご回答はこれをベースにしなくても大丈夫です。よろしくお願いします。 ---situmon.php--- <script type="text/javascript">  </script> <body> <form name="form">  <input type="radio" name="q1" id="q1" value="1" onclick="check();"/>はい <input type="radio" name="q1" id="q1" value="2" onclick="check();"/>いいえ  <input type="radio" name="q2" id="q2" value="1" />なぜ１ <input type="radio" name="q2" id="q2" value="1" />なぜ２　（その他： <input type="text" name="q2t" id="q2t" value="<php echo h(@$q2t); ?>" />）  <input type="checkbox" name="q3c" value="1" />楽しかった <select name="q3s"> <option value="" />▼選んで <option value="1" />めちゃめちゃ <option value="2" />めっちゃ <option value="3" />めちゃ </select> その他なにかあったら書いて <textarea name="q3t" id="q3t"><?php echo h(@$q3t); ?></textarea> </body>
- ベストアンサー
- JavaScript
AJAXの計算式の中にIF文を入れて表示したい
下記の2つのファイルで、フォームから入力した数値同士の「足し算の結果」をAJAXで表示できます。 ******************************************** 【HTMLフォーム】 <script language="JavaScript" type="text/javascript" src="js/culc.js"></script> <form name="f1"> <input type="text" id="text1" name="text1" size="10" maxlength="10" /> + <input type="text" id="text2" name="text2" size="10" maxlength="10" /> <input type="button" value="足す" onclick="readText()" /> </form> <p id="message"></p> ******************************************* 【JAVASCRIPT(culc.js)】 function readText() { var text1 = document.getElementById("text1"); var text2 = document.getElementById("text2"); var message = document.getElementById("message"); var str_val1 = text1.value; var str_val2 = text2.value; var sum; if (isNaN(str_val1) || str_val1 == "" || isNaN(str_val2) || str_val2 == "") { textMessage = "数値以外の文字が入っています"; } else { //sum = str_val1 + str_val2; sum = parseFloat(str_val1) + parseFloat(str_val2); textMessage = "合計は、" + sum + "です"; } message.innerHTML = textMessage; } ************************************************ 【質問】このjavascriptを改造し、入力した数値についての「足し算の結果」が正の数だった場合には「正の数」、負の数だった場合は「負の数」と表示すべく改造しております。下記の改造を施したのですが、うまく表示されません。下記の文のどこが誤りか修正頂けませんでしょうか? 宜しくお願い致します。【JAVASCRIPT(culc2.js)】 function readText() { var text1 = document.getElementById("text1"); var text2 = document.getElementById("text2"); var message = document.getElementById("message"); var str_val1 = text1.value; var str_val2 = text2.value; var sum; if (isNaN(str_val1) || str_val1 == "" || isNaN(str_val2) || str_val2 == "") { textMessage = "数値以外の文字が入っています"; } else { //sum = str_val1 + str_val2; sum = parseFloat(str_val1) + parseFloat(str_val2); textMessage = "(if((sum > 0) { document.write("正の数"); } else((sum <= 0) { document.write("負の数"); } ))"; } message.innerHTML = textMessage; }
- ベストアンサー
- AJAX
計算結果のテキスト表示
JavaScript計算式で結果を表示したいのですができません。テキストBOXには結果を入れれるのですが、テキストBOXでなく文字として結果を出したいのですがでません。以下ソースです。　19行目が表示希望箇所です。 <SCRIPT language="javascript">  </SCRIPT> <FORM name="f"> 縦<INPUT type="text" name="goods1" size="3" onChange="calc();">m * 横<INPUT type="text" name="goods2" size="3" onChange="calc();">m * 厚み<INPUT type="text" name="goods3" size="3" onChange="calc();">cm<BR> 　　　　　　60L　<INPUT type="text" name="syoukei" size="5">袋<BR> <SCRIPT language="javascript">  </SCRIPT> </FORM>
- ベストアンサー
- JavaScript