プログラムで計算結果をセルに表示する方法
- JavaScriptを使用してプログラムで計算した結果を表のセルに表示する方法を知りたい。
- 現在作成中のプログラムでは、aとbの合計をセルdに表示させたいがうまくいっていない。
- 新しいプログラミング技術が必要であり、計算結果を表のセルに表示させる方法を教えてほしい。
- ベストアンサー
プログラムで、計算結果をセルに表示したい。
現在JavaScriptで計算プログラムを作っています。どうにかして、プログラムで計算した結果を、ＨＰ上のセルに表示させて、コピーをすればエクセルに貼れるように工夫したいのですが、どうしても上手く計算結果がセルに表示させる事が出来ません。 今作ったプログラムはこんな感じです。 <title>表に数値結果を移せるかの実験</title> <body> <form name="sais"> <input type="text" size="11" name="a">＋ <input type="text" size="11" name="b"><br> <input type="button" value="表に表示出来るか？" onclick="faifa6"> <table border="1" cellspacing="0" cellpadding="0"> <tr><th width="250">d</th><th width="250">e</th></tr> <tr><th>f</th><th>g</th></tr> </table> </form> <script language="JavaScript"> function.faifa6{ a = document.sais.c.value-0; b = document.sais.c.value-0; d=a+b; document.sais.d.value=d; document.sais.e.value=e; document.sais.f.value=f; document.sais.g.value=g; } </script> </body> とりあえず今は、a+bの結果を、セルのdの部分に数値が出るようにプログラミングがしたいのです。 他のe,f,g,等は、後で応用すれば良いだけだと考えています。 セルのプログラムには<table>というのを使っているようですが、この中に単にdという文字を入力しても、この場合は単なる文字として認識されるので、数値が表示されないのでしょうか？。 プログラムは始めたばかりなので、どうか計算結果をセルの部分に表示させる技術を知っている方がいらっしゃったら、是非とも知識をご教授下さい！。 よろしくお願いします。
- dwuoa
- お礼率42% (21/49)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ずいぶん凡ミスがめだちますね <form> <input type="text" size="11" name="a">＋ <input type="text" size="11" name="b"><br> <input type="button" value="表に表示出来るか？" onclick="faifa6(this.form)"> <table border="1" cellspacing="0" cellpadding="0"> <tr><th width="250" id="d">d</th><th width="250">e</th></tr> <tr><th>f</th><th>g</th></tr> </table> </form> <script> function faifa6(f){ var a = parseInt(f.elements["a"].value); var b = parseInt(f.elements["b"].value); document.getElementById("d").innerHTML=a+b; } </script>
その他の回答 (1)
- muumiru02
- ベストアンサー率75% (3/4)
>> セルのプログラムには<table>というのを使っているようですが、この中に単にdという文字を入力しても、この場合は単なる文字として認識されるので、数値が表示されないのでしょうか？。 そうです。まずは、htmlとjavascriptを切り離して理解するのがいいかと思います。大雑把にイメージで捉えると、htmlは「こういう内容を表示してね。」という宣言に使用する道具で、javascirptはそれを自在に編集できる道具なのです。 No.1の方が指摘されているように所々文法的な誤りがありますので、javascriptの基本要素である変数や関数について調べてみるといいと思います。
関連するQ&A
- 計算結果の表示方法を教えてください。
javascriptでのプログラム作成がはじめてで 下記のようにINPUTへの計算結果を表示はできましたが、 INPUTを使用せず消費税を表示する方法を教えてください。 yahooかんたん決済の（運賃を入力すると合計が表示）様な 計算結果の表示方法を教えてください。 おそらく<SPAN>を使って表示していると思うのですがわかりません。 宜しくお願いします。 【省略】 <script type="text/javascript"> function keisan(){ var syouhizei = document.form1.syouhin1.value * 0.05; document.form1.field1.value = syouhizei; } </script> 【省略】 <tr> <td>商品サンプル1</td> <td align="right">500円</td> <td><INPUT type="text" name="syouhin1" size="8" onkeyup="keisan()"></td> <td><input type="text" name="field1" size="8" value="0"> 円</td> </tr>
- ベストアンサー
- JavaScript
- ラジオボタンで入力し、その結果をCGIで表示するプログラム
htmlで <html> <head> </head> <body> <form method="get" action="question.cgi"> <table width="50" height="" border="1" bordercolor="black" bgcolor="white" cellSpacing="0" cellpadding="5"> <tr><th>／</th><th>yes</th><th>no</th></tr> <tr><th>1</th><td><input type="radio" name="char1"></td> <td><input type="radio" name="char1"></td></tr><br> <tr><th>2</th><td><input type="radio" name="char2"></td> <td><input type="radio" name="char2"></td></tr><br> <tr><th>3</th><td><input type="radio" name="char3"></td> <td><input type="radio" name="char3"></td></tr><br> <tr><th>4</th><td><input type="radio" name="char4"></td> <td><input type="radio" name="char4"></td></tr><br> </table> <input type="button" value="送信" ><input type="reset" value="リセット"><br> </form> </body> </html> と書き、C言語でCGIを書き、ラジオボタンを押して送信ボタンを押すと 1:yes,2:no,3:no,4:yesなどと文字列で出力したいのです。 getメソッドがいいのかpostメソッドいいのかも教えていただければうれしく思います。 (この質問ではgetメソッドを使っていますが、あまり気にしないでください)
- ベストアンサー
- CGI
- 動的な表の計算
いつもお世話になります。 見よう見まねでやっている初心者です。 下記のような動的な表があります（PHPで表の行が可変します。） name="aa"に入力された値とname="bb"に入力された値の足し算の 回答をname="kaito"に出したいと思っています。 計算ボタンを押すとname="kaito"に答えを出したいのですが、 以下のような式ですと当然ながら全く反応しません。 javascriptまたはPHPをどう記述すれば表の値を計算できるようになるのでしょうか？ できれば具体的に教えて頂ければ大変助かります。 ご教授の程よろしくお願い致します。 <script> function keisan(){document.tasizan.kaito.value=(document.tasizan.aa.value)+(document.tasizan.bb.value)} </script> <form name="tasizan"> <table width="100" border="1"> <tr> <th width="10" scope="col">a</th> <th width="10" scope="col">b</th> <th width="20" scope="col">回答</th> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> </table> </form>
- ベストアンサー
- JavaScript
- ボタン一つで、複数運賃の計算を一括で計算したいです
ボタン一つで、複数運賃の計算を一括で計算したいです。 以下は、htmlとjsの文章になります。 <script src="泉北 20220801 Mon\jsファイル 20220801 Mon\運賃 20220801 Mon.js"></script> <script src="大阪メトロ 20220803 Wed\jsファイル 20220801 Mon\運賃 20220801 Mon.js"></script> <style> textarea.hoge { width: 150px; height:200px;} </style> <body> <form name="semboku_f"> 出発駅は <select name="semboku_q1"> <option>選択肢</option> <option>中百舌鳥</option> <option>深井</option> <option>泉ケ丘</option> </select> です。 <p> 到着駅は <select name="semboku_q2"> <option>選択肢</option> <option>中百舌鳥</option> <option>深井</option> <option>泉ケ丘</option> </select> です。<p> <input type="button" name="b1" value="運賃検索" onclick="semboku_kotae()"> <p></input> <table border="1"> <tr><th>距離</th><th> <input name=semboku_tokuten size="6">km</input></th></tr> <tr><th>普通大人</th><th><input name=semboku_futsu_otona id="semboku_futsu_otona_2">円</input></th></tr> <tr><th>普通小児</th><th><input name=semboku_futsu_shoni id="semboku_futsu_kodomo_2">円</input></th></tr> </table> </form> <!--HTMLここまで--> <!--問題--> <br> <hr> <br> <!--阪和線--> <body> <form name="osakametro_f"> 出発駅は <select name="osakametro_q1"> <option>選択肢</option> <option>江坂</option> <option>梅田</option> <option>なんば</option> </select> です。 <p> 到着駅は <select name="osakametro_q2"> <option>選択肢</option> <option>江坂</option> <option>梅田</option> <option>なんば</option> <option>天王寺</option> </select> です。<p> <input type="button" name="b2" value="運賃検索" onclick="osakametro_kotae()"> <p></input> <table border="1"> <tr><th>距離</th><th> <input name=osakametro_tokuten size="6">km</input></th></tr> <tr><th>普通大人</th><th><input name=osakametro_futsu_otona id="osakametro_futsu_otona_2">円</input></th></tr> <tr><th>普通小児</th><th><input name=osakametro_futsu_shoni id="osakametro_futsu_kodomo_2">円</input></th></tr> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームに入力された数値の取得</title> </head> <body> <form> <button id="button">足す</button> </form> <table border="1"> <tr><th><label for="futsus_otona">普通大人: </label></th><th><input type="text" id="futsu_otona"></th></tr> <tr><th><label for="futsus_shoni">普通子供: </label></th><th><input type="text" id="futsu_shoni"></th></tr> <table> </body> <script> var button = document.getElementById("button"); var button = document.getElementById("button"); button.addEventListener("click", function(e) { e.preventDefault(); var semboku_futsu_otona_2 = document.getElementById("semboku_futsu_otona_2").value; var osakametro_futsu_otona_2 = document.getElementById("osakametro_futsu_otona_2").value; var sum = parseInt(semboku_futsu_otona_2, 10) + parseInt(osakametro_futsu_otona_2, 10); var futsu_otona = document.getElementById("futsu_otona"); futsu_otona.value = sum; }); </script> を、例えば、普通大人運賃と普通小児運賃の計算をボタン一つで計算する場合、どうしたらいいですか。 一つならできました。 尚、自分がわかっているのはイベントは一つのhtmlで同時使用できないため、for関数を使用するのと、buttonタブであれば、for (let i = 0; i < buttonElements.length; i++) { buttonElements[i].addEventListener('click', function () {}を使うことです。
- 締切済み
- JavaScript
- 計算結果のテキスト表示
JavaScript計算式で結果を表示したいのですが できません。 テキストBOXには結果を入れれるのですが、 テキストBOXでなく文字として結果を出したいのですが でません。 以下ソースです。 19行目が表示希望箇所です。 <SCRIPT language="javascript"> <!-- function calc() { with(document.f) { syoukei.value = goods1.value * goods2.value * (goods3.value * 0.01) ; syoukei.value = Math.round(syoukei.value) } } // --> </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"> <!-- document.write(syoukei); } // --> </SCRIPT> </FORM>
- ベストアンサー
- JavaScript
- 表示されません(>_<)!!
以下のように作ってみたんですけど、わたしは判定結果は四角の中に表示されるようにやったつもりだったんですけど、新しいページに「痩せてます」と表示されてしまいます。どこを直せば良いでしょう？ お願いします <HTML> <HEAD> <TITLE>関数のテスト</TITLE> <SCRIPT language="JavaScript"> <!-- function test() { height = document.aaa.h.value; weight = document.aaa.w.value; himan = (height-100)*0.9; if (himan <= weight) { document.write("痩せてます。"); } else { document.write("太っています。"); } } //--> </SCRIPT> </HEAD> <BODY> <form name="aaa"> <table> <tr><td>身長</td><td><input name = "h"> </td></tr> <tr><td>体重</td><td><input name = "w"> </td></tr> <tr><td><input type="button" value ="判定" onClick = "test()" ></td></tr> <tr><td>判定結果</td><td><input name = "hi"> </td></tr> </table> </form> </BODY> </HTML>
- ベストアンサー
- JavaScript
- 初めからカンマが付いている数を計算したいのですが。
以下のようにテーブル内の数、A,B,Cを足して、 Ｄに合計を出したいのですが カンマを付けて表示させる方法がありますでしょうか？ <HTML> <script type="text/javascript"> <!-- function goukei() { add=Number(document.all.A.innerText.substring(0,7)) +Number(document.all.B.innerText.substring(0,7)) +Number(document.all.C.innerText.substring(0,7)); document.all.D.innerText=document.all.D.innerText + add; } // --> </script> <BODY onload="goukei()"> <TABLE border="1"> <TR><TH>Ａ</TH><TH ID="A">1,001</TH></TR> <TR><TH>Ｂ</TH><TH ID="B">10,010</TH></TR> <TR><TH>Ｃ</TH><TH ID="C">100,100</TH></TR> <TR><TH>合計</TH><TH ID="D"><!-- 合計表示 --></TH></TR> </TABLE> </BODY> </HTML>
- ベストアンサー
- JavaScript
- select表示について
先程selectにて計算表示をご相談させて頂きました。 その方法を回避した方が良かったので回避した方法で進めています 改めてご相談させて頂きます。 HTML側のセレクトで PHPにある「４つの計算の配列の答えを１つだけ選んで表示する」 方法を考えています HTML側の状況です <HTML> <HEAD> </HEAD> <BODY> <form action="http://localhost/test/**/**.php" method="post"> <select name="e" size=1> <option value = "{$stock["a"]}">１</option> <option value = "{$stock["b"]}">２</option> <option value = "{$stock["c"]}">３</option> <option value = "{$stock["d"]}">４</option> </select> <input type = "submit" value = "送信"> <input type = "reset" value = "クリア"> </BODY> </HTML> PHP側の状況です <?php //計算データー $num1 = 2; $num2 = 3; $num3 = 4; $num4 = $num1*$num2; $num5 = $num2+$num3; $num6 = $num3+$num2-$num1; //ストックデーター $stock["a"] = $num3; $stock["b"] = $num4; $stock["c"] = $num5; $stock["d"] = $num6; //上のストックデータをhtml側からセレクトで行うのが下の$eです $e = $_POST["e"]; ?> <table border="2"> <tr bgcolor="#AAAAAA"> <th>在庫状況</th> </tr> <?php print "<tr><td>結果は{$stock["a"]}です。</td></tr>\n"; print "<tr><td>結果は{$stock["b"]}です。</td></tr>\n"; print "<tr><td>結果は{$stock["c"]}です。</td></tr>\n"; print "<tr><td>結果は{$stock["d"]}です。</td></tr>\n"; //上記は計算表示ＯＫ 下記のセレクトの結果が文字のみ表示で選択表示はされず print "<tr><td>セレクトの結果 {$_POST["e"]}です。</td></tr><br/>\n"; ?> 計算表示は出て来るのですが、肝心なpost"e"のselectの指示と表示方法の根本が分かっていない為、selectだけが全く反映されてません。 ストックデーターの上下に何かの指示が絶対に必要だと思いますが これ以上は答えが出せない状況です 超初心者で分からない者で大変申し訳ございませんがどなたか再びご教示願います。
- 締切済み
- PHP
- index が0の1行目が計算されない
お世話になります。 基本的な事もわかっていない超初心者です。 どうか、ご教授下さい。 以下のhtml表はphpで<?php $index = 0; while ( ループ条件 { ?> <input type="button" value="計算" onclick="keisan(<?= $index ?>)" /> <? php$index++;} ?> でできた表ですが、 以下のjavascript でkeisan ( index )が下記のように表が１行しかない場合 javascriptエラーで計算できません。 <script type="text/javascript"> function keisan ( index ) { var formObj = document.tasizan; var aa = parseInt ( formObj.aa[index].value ); var bb = parseInt ( formObj.bb[index].value ); formObj.kaito[index].value = aa + bb;} </script> <form name="tasizan"> <table> <tr><th>A</th><th>B</th><th>回答</th></tr><tr> <td><input type="text" name="aa" size="5" /></td> <td><input type="text" name="bb" size="5" /></td> <td><input type="text" name="kaito" size="10" /> <input type="button" value="計算" onclick="keisan(0)" /></td> </tr></table></form> そこで自分なりに function keisan ( index ) { if(index==0){var formObj = document.tasizan; var aa = parseInt ( formObj.aa.value ); var bb = parseInt ( formObj.bb.value ); formObj.kaito.value = aa + bb;} if(index>1){ var formObj = document.tasizan; var aa = parseInt ( formObj.aa[index].value ); var bb = parseInt ( formObj.bb[index].value ); formObj.kaito[index].value = aa + bb; };} 等、色々考えてみましたがこれでは複数行ある時の1行目が計算されません。 どうしたら複数行ある時にも1行目を計算できるようになるのでしょうか？ 具体的に教えて頂けると大変助かります。 どうかご教授の程よろしくお願い致します。
- ベストアンサー
- JavaScript
- JavaScriptでの配列表示の表示制御
Javaの配列をJSPでテーブルに表示する際に、 配列の最初の要素(1つ)だけを表示して、 残りの要素はデフォルト非表示にしたいです。 「開く」ボタンを押下すると、配列の残りの要素を表示する、 というような作りにしたいのですが JavaScript部分をどう書いたら実装できるかがわかりません。 今現在、全表示時で下のような感じです。 ご教授お願い致します。 似たようなページがありましたらお教え頂けると幸いです。 <table> <tr> <th>配列</th> </tr> <c:forEach items="${配列型}" var="あ"> <tr> <td><c:out value="${あ.中身}" /></td> </tr> </c:forEach> </table> <input type="submit" value="開く" onclick="toOpen()"></input>
- ベストアンサー
- JavaScript
