Как я могу отобразить 2 разные кнопки в 2 разных текстовых полях? - PullRequest
Новая
       6

Как я могу отобразить 2 разные кнопки в 2 разных текстовых полях?

1 голос
/ 09 февраля 2020

это мой html код структуры моей системы

Я нашел контент YouTube, в котором он создает калькулятор, но он использует только 2 текстовых поля, в моем случае я хочу чтобы использовать 3 текстовое поле, я хочу, чтобы первое число отображалось в текстовом поле 1, я хочу отображать второе число в текстовом поле 2, и их результат будет отображаться в текстовом поле 3 

	function getNumber(num){
	var input_var = document.getElementById('num1');
	switch(num){
		case 1:
			input_var.value +='1';
			break;
		case 2:
			input_var.value +='2';
			break;
		case 3:
			input_var.value +='3';
			break;
		case 4:
			input_var.value +='4';
			break;
		case 5:
			input_var.value +='5';
			break;
		case 6:
			input_var.value +='6';
			break;
		case 7:
			input_var.value +='7';
			break;
		case 8:
			input_var.value +='8';
			break;
		case 9:
			input_var.value +='9';
			break;
		case 10:
			input_var.value +='0';
			break;
	}
}

function getOperand(operand){
	var input_var = document.getElementById('answer');
	switch(operand){
		case '+':
			input_var.value +='+';
			break;
		case '-':
			input_var.value +='-';
			break;
		case 'x':
			input_var.value +='*';
			break;
		case '/':
			input_var.value +='/'
			break;
		case '+/-':
			input_var.value +='-'+input_var.value;

		}
	}

function clearScreen(){

	document.getElementById('answer').value = "";
	}

	function backspace(){
	var input_var = document.getElementById('answer');
	var x = input_var.value;
	if (x.length > 0){
		x = x.substring(0,x.length-1);
		input_var.value = x;
	}
}

function compute(){
	var input_var = document.getElementById('answer');
	ans = +eval(input_var.value);
	document.getElementById('answer').value="= "+ans;	
}
<!DOCTYPE html>
<html>
<head>
	<title>Simple Calculator</title>
</head>
<body>
	<center>
	<table>
		<tr>
			</tr>
				<td class="heading">
					Simple Math Calculator
				</td>
				<tr>
			</tr>
			<td>
				<input type="text" id="num1" style="text-align: right;"><br>
				<input type="text" id="num2" style="text-align: right;"><br>
				<input type="text" id="answer" readonly="readonly" style="color: green; text-align: right;" placeholder="0">
			</td>
		</tr>
		<td>
			<input type="button" value="CE" onclick="clearScreen()" style="color: white; background: red;">
			<input type="button" value="&#247;" onclick="getOperand('/')">
			<input type="button" value="x" onclick="getOperand('x')">
			<input type="button" value="&#8592;" onclick="backspace()" style="color: red;">
			<br>
			<input type="button" value="1" onclick="getNumber(1)">
			<input type="button" value="2" onclick="getNumber(2)">
			<input type="button" value="3" onclick="getNumber(3)">
			<input type="button" value="+" onclick="getOperand('+')">
			<br>
			<input type="button" value="4" onclick="getNumber(4)">
			<input type="button" value="5" onclick="getNumber(5)">
			<input type="button" value="6" onclick="getNumber(6)">
			<input type="button" value="-" onclick="getOperand('-')">
			<br>
			<input type="button" value="7" onclick="getNumber(7)">
			<input type="button" value="8" onclick="getNumber(8)">
			<input type="button" value="9" onclick="getNumber(9)">
			<input type="button" value="+/-" onclick="getOperand('+/-')">
			<br>
			<input type="button" value="0" onclick="getNumber(0)">
			<input type="button" value="=" onclick="compute()" style="width: 120px; color: white; background: green;">
			<br>





		</td>		
	</table>
	</center>
</body>
</html>
...