Не получается доделать калькулятор

Question

<!DOCTYPE html>
<html>

<head>

  </style>
  <meta charset="utf-8" />
  <title>Сайт 2</title>
  <script>
    function cal(form) {
      var a = Number(form.x.value);
      var b = Number(form.y.value);
      var c;
      c = a + b
      alert(c);
      form.result.value = a + b;
    }

    function cals(form) {
      var c = Number(form.o.value);
      var v = Number(form.p.value);
      var Dok;
      Dok = c - v
      alert(Dok);
      form.result2.value = Dok;
    }

    function calt(form) {
      var drou = Number(form.z.value);
      var krou = Number(form.h.value);
      var l;
      l = drou / krou;
      alert(l);
      form.result3.value = l;
    }

    function calh(form) {
      var kt = Number(form.c.value);
      var ch = Number(form.v.value);
      var po;
      po = ch * kt
      alert(po);
      form.result4.value = ch * kt;
    }
  </script>
</head>

<body>
  <noscript>Подключите JS</noscript>

  <form action="" method="POST" name="Form1" id="Form1">
    <input type="number" name="x" id="x" value="0">
    <input type="button" name="submit" value="+" onclick="cal(document.getElementById('Form1'))">
    <input type="number" name="y" id="y" value="0">
    <label for="result">=</label>
    <input type="text" name="result" placeholder="0">
  </form>
  <br>
  <form action="" method="POST" name="Form2" id="Form2">
    <input type="number" name="o" id="o" value="0">
    <input type="button" name="submit" value="-" onclick="cals(document.getElementById('Form2'))">
    <input type="number" name="p" id="p" value="0">
    <label for="result">=</label>
    <input type="text" name="result2" placeholder="0">
    <br>
    <form action="" method="POST" name="Form3" id="Form3">
      <input type="number" name="z" id="z" value="0">
      <input type="button" name="submit" value="/" onclick="calt(document.getElementById('Form3'))">
      <input type="number" name="h" id="h" value="0">
      <label for="result">=</label>
      <input type="text" name="result3" placeholder="0">
      <br>
      <form action="" method="POST" name="Form4" id="Form4">
        <input type="number" name="c" id="c" value="0">
        <input type="button" name="submit" value="*" onclick="calh(document.getElementById('Form4'))">
        <input type="number" name="v" id="v" value="0">
        <label for="result">=</label>
        <input type="text" name="result4" placeholder="0">
</body>
<html>

Answer 1

Не создавайте вложенные теги form. (Зачем они вообще тут нужны?) Браузер их удаляет.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Сайт 2</title>
  <script>
    function cal(form) {
      var a = Number(form.x.value);
      var b = Number(form.y.value);
      var c;
      c = a + b
      alert(c);
      form.result.value = a + b;
    }

    function cals(form) {
      var c = Number(form.o.value);
      var v = Number(form.p.value);
      var Dok;
      Dok = c - v
      alert(Dok);
      form.result2.value = Dok;
    }

    function calt(form) {
      var drou = Number(form.z.value);
      var krou = Number(form.h.value);
      var l;
      l = drou / krou;
      alert(l);
      form.result3.value = l;
    }

    function calh(form) {
      var kt = Number(form.c.value);
      var ch = Number(form.v.value);
      var po;
      po = ch * kt
      alert(po);
      form.result4.value = ch * kt;
    }
  </script>
</head>

<body>
  <noscript>Подключите JS</noscript>

  <form action="" method="POST" name="Form1" id="Form1">
    <input type="number" name="x" id="x" value="0">
    <input type="button" name="submit" value="+" onclick="cal(document.getElementById('Form1'))">
    <input type="number" name="y" id="y" value="0">
    <label for="result">=</label>
    <input type="text" name="result" placeholder="0">
  </form>
  <br>
  <form action="" method="POST" name="Form2" id="Form2">
    <input type="number" name="o" id="o" value="0">
    <input type="button" name="submit" value="-" onclick="cals(document.getElementById('Form2'))">
    <input type="number" name="p" id="p" value="0">
    <label for="result">=</label>
    <input type="text" name="result2" placeholder="0">
    <br>
  </form>
  <form action="" method="POST" name="Form3" id="Form3">
    <input type="number" name="z" id="z" value="0">
    <input type="button" name="submit" value="/" onclick="calt(document.getElementById('Form3'))">
    <input type="number" name="h" id="h" value="0">
    <label for="result">=</label>
    <input type="text" name="result3" placeholder="0">
    <br>
  </form>
  <form action="" method="POST" name="Form4" id="Form4">
    <input type="number" name="c" id="c" value="0">
    <input type="button" name="submit" value="*" onclick="calh(document.getElementById('Form4'))">
    <input type="number" name="v" id="v" value="0">
    <label for="result">=</label>
    <input type="text" name="result4" placeholder="0">
  </form>
</body>
<html>

БЛОГ НА HUSL

Не получается доделать калькулятор

Ответы (1 шт):