javascript初心者です。

締切済

質問者：みーちゃん13
質問日時：2021/02/17 23:23
回答数：2件

javascriptを使ってWordPressのサイト上に計算フォームを作成したいのですが、中々うまくいきません。
入力した数値（小文字のアルファベット）をもとに計算をし、javascriptで計算結果（大文字のアルファベット）を出力したいです。

外部ファイルから読み込むというのがよく分からないので直接エディタに入力したいと思っております。

インプットを【】←表記とします。
a.b.cは固定の数字

総獲得数【 a 】総完了数【 b 】

ダイヤ【 c 】

1. トロフィー【 d 】タスク【 e 】→ X（式は｛d/a✳︎（c/2）｝+｛e/b✳︎（c/2）｝

2.トロフィー【 f 】タスク【 g 】→ Y（式は｛f/a✳︎（c/2）｝+｛g/b✳︎（c/2）｝

これがあと18こ続きます。

もし可能であれば、教えていただけると助かります。

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

参考程度に

No.2

回答者： fujillin
回答日時：2021/02/20 17:12

こんにちは

>インプットを【】←表記とします。
>a.b.cは固定の数字
「インプット」と言っているのは、INPUT要素だと想像しますが、固定値になぜINPUT要素なのか謎です。

HTMLのご提示もないので、全体像がよくわかりませんが、勝手な想像でこんな感じでしょうか？

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style>
div p { margin:0; }
input { width:6em; }
</style>
<script>
window.addEventListener('DOMContentLoaded', e=>{
const
getV = (e, n)=> parseFloat(e.querySelector('input[name="' + n + '"]').value) || 0,
a = getV(document, 'a'),
b = getV(document, 'b'),
c = getV(document, 'c'),
L = document.getElementById('data');

for(let i=0; i<19; i++) L.appendChild(L.firstChild.cloneNode(1));
L.addEventListener('change', e=>{
let t = e.target, p = t.parentNode;
if(t.nodeName != 'INPUT') return;
let r = (getV(p, 'd')/a + getV(p, 'e')/b) * c/2;
p.querySelector('output').textContent = r;
})
});
</script>
</head>
<body>
<div>
<p>総獲得数：<input type="text" name="a" value=2 disabled />
<p>総完了数：<input type="text" name="b" value=4 disabled />
<p>ダイヤ　：<input type="text" name="c" value=5 disabled />
</div>
<ol id="data"><li>
　トロフィー：<input type="number" name="d" />
　タスク：<input type="number" name="e" />
　X：<output name="X"></output>
</li>
</ul>
</body>
</html>