プロが教える店舗＆オフィスのセキュリティ対策術

詳しい人求む！

JavaScriptでフォームに入力したデータに既定の計算がしたいです

解決済

JavaScriptを利用してフォームに入力したデータを計算をしたいです。

詳しく説明すると利用者が入力するデータは２で（それぞれＡ、Ｂとします）Ａ÷Ｂ×100-50をしたいです
割り算は小数第４位を四捨五入して小数第３位までの概数にしたいです。

またそれを並べてさらに計算をしたいです。

イメージはこんな感じです

　　　　　 テキスト 　　テキスト 　 テキスト
テキスト　[フォーム]　[フォーム] 　[計算結果]　←ここに上記の計算をします
テキスト　[フォーム]　[フォーム] 　[計算結果]
テキスト　[フォーム]　[フォーム] 　[計算結果]
テキスト　上３段の和　上３段の和 　[計算結果]　←ここも上記の計算をします
テキスト　[フォーム]　[フォーム] 　[計算結果]
テキスト　[フォーム]　[フォーム] 　[計算結果]
テキスト　上５段の和　上５段の和 　[計算結果]　←上３段の和は含みません　もしくは上３段の和から下の３段までの和
テキスト　[フォーム]　[フォーム] 　[計算結果]
テキスト　[フォーム]　[フォーム] 　[計算結果]
テキスト　[フォーム]　[フォーム] 　[計算結果]
テキスト　[フォーム]　[フォーム] 　[計算結果]
テキスト　上９段の和　上９段の和 　[計算結果]　←上３段の和・上５段の和は含みません　もしくは上５段の和から下の５段までの和

[計算]　←[計算]ボタンを押すと一気に計算

本当に初心者で説明がうまくできません。申し訳ございませんが誰か知識をお貸しください。

質問者からの補足コメント

  • データは２で　ではなく　データは２つで　でした。すみません。

      補足日時：2020/06/21 22:00
    通報する

  • 小計のようになっている行の３列目は、同じ計算式で計算していただいて大丈夫です。

    四捨五入は除算の部分の商を小数第３位までにする＝　×100をするので計算結果は小数第１位まで　ということでした。説明不足ですみません。（3)のところを変更すればよいでしょうか？

    また、各列にテキスト（題名）を入れたいです。

    　テキスト←　テキスト←　テキスト←
    ［フォーム］［フォーム］［計算結果］
    ［フォーム］［フォーム］［計算結果］←先頭行のみでＯＫ

    どうしたらよいでしょうか。

    お忙しいところ申し訳ございません。

    No.4の回答に寄せられた補足コメントです。 補足日時：2020/06/23 21:35
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.4ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんにちは



小計のようになっている行の3列目は、同じ計算式で計算するのか、単に上の行の小計を求めるのかがよくわかりませんが、適当に、同様の計算式と解釈。

HTMLはTableが良いのかも知れませんが、form>p>input の形式にしてあります、
入力値が整数値限定で良ければ、input type="number" としておくことで、自動制御が可能ですが、よくわからなかったのでtextのままです。
ですので、数値以外も入力できてしまいますが、「数値に換算できないものは0と見なす」という極めて大雑把なチェックのみを行っています。

計算式内に除算があることもあり、数値でないものが存在する場合は NaN、Infinity　などのエラー値がそのまま表示されます。（処理をしていませんので…）

文章の解釈が合っているかよくわかりませんが、こんな感じでしょうか？
実際になさりたい内容によって、もっと適切な方法が考えられる可能性は高いと思いますが、説明文からだけで思いつくひとつの方法例として。
「calcボタン」(=submitボタン）で計算するようにしてありますが、フォーム中でのリターンキー押下げはサブミットになるので、そちらでも計算は実行されます。）

※ let calc =~~ の行が計算式を定義している部分ですので、この計算式を変えれば、ご指定の計算式を変更することも可能です。

<!DOCTYPE HTML>
<html lang="ja">
<head><title></title>
<style type="text/css">
#f1 p{ margin: 0.3em 0; }
#f1 input{ width: 8em; margin: 0 1em; border:1px solid gray; }
#f1 input:nth-child(3), #f1 .subT input{ background-color:#F0F0F4; }
</style>
</head>
<body>

<form id="f1">
<p><input type="text" /><input type="text" /><input type="text" /></p>
<p><input type="text" /><input type="text" /><input type="text" /></p>
<p><input type="text" /><input type="text" /><input type="text" /></p>
<p class="subT"><input type="text" /><input type="text" /><input type="text" /></p>

<p><input type="text" /><input type="text" /><input type="text" /></p>
<p><input type="text" /><input type="text" /><input type="text" /></p>
<p class="subT"><input type="text" /><input type="text" /><input type="text" /></p>

<p><input type="text" /><input type="text" /><input type="text" /></p>
<p><input type="text" /><input type="text" /><input type="text" /></p>
<p><input type="text" /><input type="text" /><input type="text" /></p>
<p><input type="text" /><input type="text" /><input type="text" /></p>
<p class="subT"><input type="text" /><input type="text" /><input type="text" /></p>
<p><input type="submit" style="margin-top:2em;" value="calc" /></p>
</form>


<script type="text/javascript">
(() => {
let toFloat = (n) => parseFloat(n)?parseFloat(n):0;
let calc = (a, b) => (toFloat(a) * 100 / toFloat(b) - 50).toFixed(3);

let inps = document.querySelectorAll("#f1 input");
let inp3 = document.querySelectorAll("#f1 input:nth-child(3)");
let subT = document.querySelectorAll("#f1 .subT");
let subInp = document.querySelectorAll("#f1 .subT input");
let sumN = [3, 3, 5];

inp3.forEach(e => { e.readOnly = true; });
subInp.forEach(e => { e.readOnly = true; });

/*** サブミット時の処理 ***/
document.getElementById("f1").addEventListener("submit", e => {
e.preventDefault();
/* 小計計算 */
for(let i=0; i<3; i++){
subT[i].querySelectorAll("input").forEach(e => {
let t = 0, n = Array.prototype.indexOf.call(inps, e);
for(let j=0; j<sumN[i]; j++) t += toFloat(inps[n - j * 3 - 3].value);
e.value = t.toFixed(3);
});
}
/* 3列目の計算 */
inp3.forEach(e => {
let e1 = e.previousSibling;
e.value = calc(e1.previousSibling.value, e1.value);
});
});
})();
</script>
</body>
</html>
この回答への補足あり
    • good
    • 0
    • 件
通報する
この回答へのお礼

詳しくありがとうございます。

一番やりたかったことに近かったのでベストアンサーにさせていただきます。

通報する
お礼日時：2020/06/26 23:24

No.5

  • 回答者： fujillin
  • 回答日時：

No4です



HTMLもどうするのか不明なままでのサンプル回答ですので、No4はあくまでも参考としてのものです。
実際は、データのチェックや使い勝手・操作性なども考慮しながら再構築する必要があるものと思いますが、実現方法のひとつのサンプルとしてのものです。

No4の計算方法はinput要素だけを対象にして計算していますので、その他の要素が間に入ったとしても、以下の点を除いてはそのまま成立するものと思います。
HTMLの構成によって影響を受ける可能性があるのは、3列目の要素を「nth-child」で識別していますので、それが変わる場合は「last-child」あるいはその他のclassなどを別途に設けて識別するなどといったようにすることで対応可能と思います。

補足でご提示のような、「単純なテキスト行を挿入する」というような程度であれば、何の影響はないので、そのままでも計算はできるはずと思います。
    • good
    • 0
    • 件
通報する

No.3

最初の１段目だけＡ÷Ｂ×100-50の計算を作った。


これを参考に、計算の行数をプラスしていけば良い


小数第３位までとか、全角数字も対応させるとかは、今日は時間ないので
、今回はこれで

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title></title>
</head>

<body>
<form>
<label for="textForm">計算する: </label>
<input type="text" id="textForm">
<input type="text" id="textForm2">
<button id="button">計算する</button>
</form>



<label for="resultForm">取得した値: </label>
<input type="text" id="resultForm">
</body>

<script>


var button = document.getElementById("button");

button.addEventListener("click", function(e) {

e.preventDefault();


var textForma = document.getElementById("textForm").value;
var textForma2 = document.getElementById("textForm2").value;
var result = textForma/textForma2*100-50


var resultForm = document.getElementById("resultForm");
resultForm.value = result;
});

</script>

</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！

codeを１つずつググって勉強します！

通報する
お礼日時：2020/06/22 22:37

No.2

そうですね、ハートって、笑



とりあえず、JavaScriptの四則演算と、変数、Domの知識はつけといて、ネットで調べらるでしょう

明日時間あったら、code書いてみるから、ちょっと待ってね。
    • good
    • 0
    • 件
通報する

No.1

情報がなさ過ぎ



JavaScriptで、その計算するのは簡単

でも、DomでHtmlと繋げて、webで公開するのか
googleスプレッドで色んな人に公開するのか

そして、例え、code教えても、そのレベルじゃ理解出来ないと思うから、厳しいと思うよ。
    • good
    • 1
    • 件
通報する
この回答へのお礼

そうですね♡

通報する
お礼日時：2020/06/21 22:14

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報