Как подключить input(radio) к джаваскрипт,чтобы например нажав "+",числа прибавились

Question

$('document').ready(function(){
	
	$('button').on('click',function(){
		var a,b,c,d;
		a=Number($('#val1').val());
		b=Number($('#val2').val());
		

	});


	
});

body{
	background-color: #333;
	padding:5px;
	margin:5px;
}
form{
	border:5px green;
	background-color: #333945;
	border-style: double;
}
input{
	padding:5px;
	margin:5px;

}
button{
	padding:5px;
	margin:5px;
	color: white;
	background-color: green;
}
b{
	padding:5px;
	margin:5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test site</title>
	<link rel="stylesheet" href="csstest.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jstest.js"></script>
</head>
<body>
	<form align=center>
		<b >Калькулятор</b><br>
		<input type="number" name="" id="val1"><br/>
		<input type="radio">+
		<input type="radio">-
		<input type="radio">*
		<input type="radio">/<br/>
		<input type="number" name="" id="val2"><br/>
		<button><b >Ответ</b></button>
		
		<br/>
	</form>
	
</body>

Answer 1

наперед прошу прощение за: а) код проверить не могу; б) плохо знаю jQuery, потмоу что призираю

$('document').ready(function() {
    $('button').on('click',function() {
        var a = Number(document.getElementById('val1').value;
        var b = Number(document.getElementById('val2').value;
        var selectedOperator = document.querySelector('input[type=radio]:checked'); //берем значение выбранного радио-input

        if (!selectedOperator) return; //проверяем,если не выбран ни один радиобаттон (но проще добавить выбранный input по умолчанию)

        alert(eval(a + selectedOperator.value + b)); // c помощью eval берем арифметическою строку и превращаем её в js код
    });
});

но для этого еще нужно к каждому input type="radio" добавить одинаковые аттрибуты name, чтобы радиобатоны работали нужным образом (как бы объеденить в одну группу), например так:

<input type="radio" name="lolo">+
<input type="radio" name="lolo">-
<input type="radio" name="lolo">*
<input type="radio" name="lolo">/<br/>

Answer 2

let localMath = {
  '+': (a, b) => a + b,
  '-': (a, b) => a - b,
  '*': (a, b) => a * b,
  '/': (a, b) => a / b,
};
// См. "JS объекты", "стрелочные функции"

$('button').on('click', function() {
  let a = +$('#val1').val(); // плюсик делает то же, что и Number()
  let b = +$('#val2').val();
  let key = $('[name="operation"]:checked').val();
  
  console.log( localMath[key](a, b) );
  // Из объекта localMath достается нужная функция, и вызывается с аргументами (a, b)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="number" id="val1">
<hr>
<input type="radio" value="+" name="operation" checked>+
<input type="radio" value="-" name="operation">-
<input type="radio" value="*" name="operation">*
<input type="radio" value="/" name="operation">/
<hr>
<input type="number" id="val2">
<hr>
<button><b>Ответ</b></button>

Вместо объекта можно использовать цепочку условий if / else

if( key == "+" ){
  result = a + b;
} else if( key == "-" ) {
  // ляляля...
}

console.log(result)

БЛОГ НА HUSL

Как подключить input(radio) к джаваскрипт,чтобы например нажав "+",числа прибавились

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