JavaScriptで計算をしたいのですが、できません。

Question

HTMLの画面で計算がしたい

坪を平方メートルに変換する計算をしたいのですが、上手くできません。
構造上formの中にformを入れていますが、それも影響しますか？

<form>
.
.
.
.
   <form name="culc">
   <input type="text" name="data1">坪
   <input type="button" value="変換" onclick="culculate()">
   →　約<input type="text" name="data3">
   </form>
.
.
 </form>

function culculate() {
　with (document.culc) {
　var d1 = data1.value;
　var d2 = 3.3057;
　data3.value = eval(d1) * eval(d2);
　}
}

↓エラー画面

Uncaught TypeError: Cannot convert undefined or null to object
    at culculate (common.js:211)
    at HTMLInputElement.onclick (mk_contract_form.php:132)
culculate @ common.js:211
onclick @ mk_contract_form.php:132

エラー該当部分 [common.js:211]

with (document.culc) {

#　試したこと

function culculate() {
document.culc.data3.value = eval(document.culd.A.value) * eval(3.3057);
}

よろしくお願いします。

#　追記

このような形で書いて実現できました。

<input type="text" id="textForm">
<label for="textForm">坪</label>
<button id="cluc" class="btn btn-outline-primary">変換</button>

<input type="text" id="resultForm">
<label for="resultForm">㎡</label>

<script>
    var button = document.getElementById("cluc");
    button.addEventListener("click", function(e) {

      e.preventDefault();

      var textForm = document.getElementById("textForm").value;

      var resultForm = document.getElementById("resultForm");
      // resultForm.value = textForm * 3.30578;
      resultForm.value = Math.round(textForm * 3.30578512396 * 100) / 100;
    });
  </script>

Comments

[m.ts10806]

「jQueryで」と書かれていますが、提示されたコードにjQueryらしきものが見当たりません。

[heypo]

訂正しました。
ご指摘ありがとうございます。

[m.ts10806]

本件とは関係ないですが、Bootstrap4ですか？
それなら記述はjQueryに寄せた方が良いかと思います。
5ならそのままで。

Answer 1

document.culcではなく、document.forms.culcとすれば取れる…かとは思いますが、withもdocument.formsも古式ゆかしいやり方です。そんなものが書かれている資料は参考にせず、もっと新しいもので進めることをおすすめします。

構造上formの中にformを入れていますが、それも影響しますか？

今回の件とは関係ありませんが、HTMLの仕様上、<form>はネストできません。

Comments

[heypo]

返信ありがとうございます。
解決した機能を実装できました。
書き方を追記しましたが、古式ゆかしい感じでは無いでしょうか？