Форум

Alex2033 · #1 (**permalink**) 04.06.2017, 22:12

Добрый день, начал изучать js, делаю задачки, и вот здесь возникла проблема.
Дано 4 поля. При нажатии на два любых поля выводится сообщение о сумме их значений.
У меня пока только так, но это не совсем то, что нужно:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <input id="i1" onkeyup="f()"><input id="i2" onkeyup="f()">
        <input id="i3"><br>
    </body>
</html>

function f(){
           var n1=document.getElementById('i1').value;
            var n2=document.getElementById('i2').value;
            document.getElementById('i3').value=Number(n1)+Number(n2);
            }

рони · #2 (**permalink**) 04.06.2017, 22:16

Alex2033,
в чём вопрос?

Alex2033 · #3 (**permalink**) 04.06.2017, 22:28

Сообщение от рони

Alex2033,
в чём вопрос?

У меня в данном задании сейчас три поля, в два поля я ввожу значения, и в 3 поле отображается их сумма.
Тут же, как я понимаю, нужно сделать 4 поля, записать в эти поля значения, и после этого кликнуть на любые два поля, после чего должно произойти оповещение(alert), то есть окно с суммой значений кликнутых раннее этих самых двух полей.
Если попроще, то у нас 4 поля, и присвоим каждому полю свой номер:
1
2
3
4
Я начинаю кликать, например так: 1-2, после того как я нажал на 2 поле, приходит оповещение с суммой этих двух полей, потом я жму ок, нажимаю 3-2 и тд и тп

j0hnik · #4 (**permalink**) 04.06.2017, 22:29

Сообщение от Alex2033

Дано 4 поля.

У вас три поля

рони · #5 (**permalink**) 04.06.2017, 22:37

Alex2033,
ничего не понял

j0hnik · #6 (**permalink**) 04.06.2017, 22:41

<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="text" id="i1" onblur="f()"><br>
	<input type="text" id="i2" onblur="f()"><br>
	<input type="text" id="i3" onblur="f()"><br>
	<input type="text" id="i4" onblur="f()"><br>
	<script>
		function f(){
			var n1=document.getElementById('i1').value;
			var n2=document.getElementById('i2').value;
			var n3=document.getElementById('i3').value;
			var n4=document.getElementById('i4').value;
			alert(Number(n1)+Number(n2)+Number(n3));
		}
	</script>
</body>
</html>

Так? или я тоже ничего не понял

Alex2033 · #7 (**permalink**) 04.06.2017, 23:54

Сообщение от j0hnik

<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="text" id="i1" onblur="f()"><br>
	<input type="text" id="i2" onblur="f()"><br>
	<input type="text" id="i3" onblur="f()"><br>
	<input type="text" id="i4" onblur="f()"><br>
	<script>
		function f(){
			var n1=document.getElementById('i1').value;
			var n2=document.getElementById('i2').value;
			var n3=document.getElementById('i3').value;
			var n4=document.getElementById('i4').value;
			alert(Number(n1)+Number(n2)+Number(n3));
		}
	</script>
</body>
</html>

Так? или я тоже ничего не понял

У вас получается, так что после того, как я ввел в первое поле число, зацикливается сообщение, которое выводит это же самое число. Нужно, чтобы вы ввели в одно поле число, потом в другое поле еще число, и после этого выводится сумма этих полей

рони · #8 (**permalink**) 05.06.2017, 00:03

Alex2033,
не понимаю что вы хотите сделать, но возможно вы хотите так

oninput="f()"

function f(){
           var n1=+document.getElementById('i1').value||0;
            var n2=+document.getElementById('i2').value||0;
            document.getElementById('i3').value=n1+n2;
            }

j0hnik · #9 (**permalink**) 05.06.2017, 00:33

<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="text" id="i1" onchange="f()"><br>
	<input type="text" id="i2" onchange="f()"><br>
	<input type="text" id="i3" onchange="f()"><br>
	<input type="text" id="i4" onchange="f()"><br>
	<script>
		function f(){
			var n1=document.getElementById('i1').value;
			var n2=document.getElementById('i2').value;
			var n3=document.getElementById('i3').value;
			var n4=document.getElementById('i4').value;
			alert(Number(n1)+Number(n2)+Number(n3));
		}
	</script>
</body>
</html>

Так?

Alex2033 · #10 (**permalink**) 06.06.2017, 19:35

Давайте иначе, вернемся к 4 полям:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    	<span>Первая пара полей:</span><br>
        <input id="i1" onkeyup="f1()" style="border-radius: 5px;">+<input id="i2" onkeyup="f1()" style="border-radius: 5px;">
        <br>
        <span>Вторая пара полей:</span><br>
        <input id="i3" onkeyup="f2()" style="border-radius: 5px;">+<input id="i4" onkeyup="f2()" style="border-radius: 5px;">
    </body>
</html>

function f1(){
		        var n1 = document.getElementById('i1').value;
		        var n2 = document.getElementById('i2').value;
		        var sum1 = Number(n1)+Number(n2);
		        alert("Сумма первой пары полей равна: " + sum1);
	        }
	        function f2(){
		        var n3 = document.getElementById('i3').value;
		        var n4 = document.getElementById('i4').value;
		        var sum2 = Number(n3)+Number(n4);
		        alert("Сумма первой пары полей равна: " + sum2);
	        }

Как вы видите, после того как я заполнил первое поле мне выводит alert о сумме, тк второе поле считается как ноль, как сделать так, чтобы только после ввода в оба поля, появлялся alert, просто не совсем удобно получается

Форум

Справочник

Discord чат

Курсы javascript