0

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

function calc(sel) {
  var a, b;
  a = parseInt(document.calk.first.value);
  b = parseInt(document.calk.second.value);
  switch (sel.getElementsByTagName('option')[sel.selectedIndex].value)
  {
    case '+':
	  alert (a + b);
	  break;
	case '-':
	  alert (a - b);
	  break;
	case '*':
	  alert (a * b);
	  break;
	case "/":
	  if ((a === 0) || (b === 0)) {
	    alert('Делить на ноль нельзя');
	  }
	  else {
	    alert (a / b);
	  }
	  break;
    default: alert("неверный символ")
	  break;
  }
}

function proverka(input){
  var value = input.value;
  var rep = /0/;
  if (rep.test(value)) {
	submitButton.disabled = 1;
	input.value = value;
  }
}
<form id="calk" name="calk">
  Введите первое число:
  <input name="first"  type="text" /><br /><br/>
  <select name="sel"  size="1">
	<option calss="opt" value="+">+</option>
	<option calss="opt" value="-">-</option>
	<option calss="opt" value="*">*</option>
	<option calss="opt" value="/">/</option>
  </select><br/><br/>
  Введите второе число:
  <input type="text" id="second" onkeyup="return proverka(this)"; value=""  /><br />
  <input type="button" id="submitButton" value="Посчитать" onclick="calc(sel)"; return false; /><br/><br/>
   <p id="out">Результат:</p>
</form>

13
  • 2
    А если a===0, почему у вас делить-то нельзя?
    – vp_arth
    13 ноя 2017 в 8:48
  • было такое предыдущее задание
    – Dima
    13 ноя 2017 в 8:49
  • Т.е. ваша проблема только в том, как заменить alert на вывод в поле результата?
    – vp_arth
    13 ноя 2017 в 8:52
  • 1
    еще и регекс на проверку 0
    – IC_
    13 ноя 2017 в 8:54
  • нет, я не знаю как сделать, что бы автоматически выводился результат при вводе. Вот я написал для одной строки вывод,а от как сделать сразу подсчет не знаю
    – Dima
    13 ноя 2017 в 8:55

1 ответ 1

3

Вывод результата

Получаете поле вывода через document.getElementById.
Выводите туда текст результата через innerText.

function result(value) {
  document.getElementById('out')
    .innerText = value;
}

Реакция на ввод

Чтобы пересчёт осуществлялся при вводе аргументов, нужно обрабатывать события change или input полями ввода.

input.addEventListener('change', function(){/*...*/calc(sel);})

function result(value) {
  document.getElementById('out')
    .innerText = value;
}

function calc(sel) {
  var a, b;
  a = parseInt(document.calk.first.value);
  b = parseInt(document.calk.second.value);
  switch (sel.getElementsByTagName('option')[sel.selectedIndex].value) {
    case '+':
      result(a + b);
      break;
    case '-':
      result(a - b);
      break;
    case '*':
      result(a * b);
      break;
    case "/":
      if ((a === 0) || (b === 0)) {
        result('Делить на ноль нельзя');

      } else {
        result(a / b);
      }
      break;
    default:
      result("неверный символ")
      break;
  }
}

function proverka(input) {
  var value = input.value;
  var rep = /0/;
  if (rep.test(value)) {
    submitButton.disabled = 1;
    input.value = value;
  }
}

function onInput() {
  calc(document.calk.sel);
}

document.calk.first.addEventListener('input', onInput);
document.calk.second.addEventListener('input', onInput);
document.calk.sel.addEventListener('change', onInput);
onInput();
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="main.js" defer></script>
</head>

<body>
  <form id="calk" name="calk">
    Введите первое число:
    <input name="first" type="text" value="1" /><br /><br/>
    <select name="sel" size="1">
      <option calss="opt" value="+">+</option>
      <option calss="opt" value="-">-</option>
      <option calss="opt" value="*">*</option>
      <option calss="opt" value="/">/</option>
  </select><br/><br/> Введите второе число:
    <input type="text" id="second" onkeyup="return proverka(this)" ; value="1" /><br />
    <input type="button" id="submitButton" value="Посчитать" onclick="calc(sel)" ; return false;><br/><br/>
    <p id="out">Результат:</p>
  </form>
</body>

</html>

4
  • код нужно вешать на событие onchange у инпута/инпутов
    – Dmytro
    13 ноя 2017 в 8:56
  • @дмытрык этот код не подойдет для onchange
    – IC_
    13 ноя 2017 в 9:02
  • Так вопрошающему надо, чтобы результат выводился при каждом изменении значения в инпуте
    – Dmytro
    13 ноя 2017 в 9:04
  • Нужна была "Реакция на ввод". Выше человек уже помог
    – Dima
    13 ноя 2017 в 9:05

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.