Проверка значения переключателя формы - PullRequest
Новая
       100

Проверка значения переключателя формы

1 голос
/ 21 июня 2020

Мне нужно проверить значение переключателя и выполнить расчет в зависимости от выбора пользователя, используя случай переключателя. Пожалуйста, помогите мне запустить этот код. 

<body>
<form id="calculate" method="get"></form>
    <label for="num1">Enter 1st number (1 to 10)</label>
    <input id="num1" type="number" min="1" max="10"/><br/>

    <label for="num2">Enter 2nd number (1 to 10)</label>
    <input id="num2" type="number" min="1" max="10"/>

    <p>Select your calculation option</p>

    <input type="radio" name="operation" value="a"/>
    <label for="addition">Add</label><br/>

    <input type="radio" name="operation" value="s"/>
    <label for="subtraction">Subtract</label><br/>

    <input type="radio" name="operation" value="m"/>
    <label for="multiplication">Multiply</label><br/>


    <input type="radio" name="operation" value="d"/>
    <label for="division">Divide</label><br/>

    <input type="radio" name="operation" value="r"/>
    <label for="remainder">Remainder</label><br/>

    <input type="button" value="Submit" onclick="calculator()"/>

<p id="output"></p>

<script>
    function calculator() {
        var result;
        var op = document.getElementsByName('operation');
        switch(op) {
            case=a:
                result=num1+num2;
                break;
            case=s:
                result=num1-num2;
                break;
            case=m:
                result=num1*num2;
               break;
            case=d:
                result=num1/num2;
                break;
            case=r:
                result=num1%num2
        }
            return(result);
    }
    document.getElementById("output").innerHTML="The result of calculation is ...."+ result;
</script>
</body>

1 Ответ

0 голосов
/ 21 июня 2020

Так вот, я обнаружил несколько ошибок в вашем коде. От ошибок logi c до ошибок синтаксиса. Я предлагаю закодировать ваш пример в таких инструментах, как https://jsfiddle.net/.

Я исправил ваш код, используя следующий пример. Надеюсь, это поможет :) 

function calculator() {
  var result;
  var num1 = Number(document.getElementById('num1').value);
  var num2 = Number(document.getElementById('num2').value);

  var op = document.querySelector('input:checked').value;
  switch (op) {
    case 'a':
      result = num1 + num2;
      break;

    case 's':
      result = num1 - num2;
      break;

    case 'm':
      result = num1 * num2;
      break;

    case 'd':
      result = num1 / num2;
      break;

    case 'r':
      result = num1 % num2;

  }
  document.getElementById("output").innerHTML = "The result of calculation is .... " + result;
}
<form id="calculate" method="get"></form>
<label for="num1">Enter 1st number (1 to 10)</label>
<input id="num1" type="number" min="1" max="10" /><br/>

<label for="num2">Enter 2nd number (1 to 10)</label>
<input id="num2" type="number" min="1" max="10" />

<p>Select your calculation option</p>

<input type="radio" name="operation" value="a" />
<label for="addition">Add</label><br/>

<input type="radio" name="operation" value="s" />
<label for="subtraction">Subtract</label><br/>

<input type="radio" name="operation" value="m" />
<label for="multiplication">Multiply</label><br/>


<input type="radio" name="operation" value="d" />
<label for="division">Divide</label><br/>

<input type="radio" name="operation" value="r" />
<label for="remainder">Remainder</label><br/>

<input type="button" value="Submit" onclick="calculator()" />

<p id="output"></p>
...