そもそもname
attributeを使わないでください。それは数億年前に廃止されてます。(input
タグのname
attributeはまた別の意味合いを持ちますのでそれは別に考えてください)
したがってdocument.fm1
のようなアクセスは完全に悪いアイデアです。
またeval
を使うのは99%の場合間違った用途です。きわめて危険な関数であり、初心者の手に負えるものではありません。多分文字列から整数への変換をしたくて使っているのだと思いますが、そういう用途にはparseInt()
があります。
parseInt() - JavaScript | MDN
計算結果の表示を<INPUT size="20" type="text" name="C">
でやろうとするのもあまりいい考えではありません。form
タグより外にp
タグかなにかを置いて書き出したほうがいいでしょう。
あと、根本的にお示しのHTMLはぶっ壊れているといえます。参考にしているテキストかなにかの品質がゴミなので、そんな資料は可燃物回収かなにかに出して、まともな資料を読むことをお勧めします。
はまともな資料の一つです。これを読めば、質問者のやりたいこととほぼ同じことを実現する下のコードが理解できるようになると思います。これが理解できるぐらいまで頑張ってみてください。
html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>課題実装</title>
7</head>
8<body>
9 <section>
10 <h2>入力</h2>
11 <!-- id attriuteをJavaScriptのために指定 -->
12 <form id="fm">
13 <input type="number" size="20" id="A">+<input type="number" size="20" id="B">
14 <button type="submit">計算</button>
15 </form>
16 </section>
17 <section>
18 <h2>結果</h2>
19 <!-- ここに結果を表示する -->
20 <p id="result"></p>
21 </section>
22 <script type="module" src="index.js"></script>
23</body>
24</html>
js
1
2const add = (a, b) => a + b;
3const mount = () => {
4 const fm = document.getElementById("fm");
5 const a = document.getElementById("A");
6 const b = document.getElementById("B");
7 const result = document.getElementById("result");
8 fm.addEventListener("submit", e => {
9 // submitイベントの本来の動作を止める
10 e.preventDefault();
11 result.innerHTML = add(parseInt(a.value), parseInt(b.value));
12 })
13}
14mount();
15
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。