Сумма значений полей при нажатии на них
Добрый день, начал изучать 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);
}
|
Alex2033,
в чём вопрос? |
Цитата:
Тут же, как я понимаю, нужно сделать 4 поля, записать в эти поля значения, и после этого кликнуть на любые два поля, после чего должно произойти оповещение(alert), то есть окно с суммой значений кликнутых раннее этих самых двух полей. Если попроще, то у нас 4 поля, и присвоим каждому полю свой номер: 1 2 3 4 Я начинаю кликать, например так: 1-2, после того как я нажал на 2 поле, приходит оповещение с суммой этих двух полей, потом я жму ок, нажимаю 3-2 и тд и тп |
Цитата:
|
Alex2033,
ничего не понял |
<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,
не понимаю что вы хотите сделать, но возможно вы хотите так oninput="f()"
function f(){
var n1=+document.getElementById('i1').value||0;
var n2=+document.getElementById('i2').value||0;
document.getElementById('i3').value=n1+n2;
}
|
<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>
Так? |
Давайте иначе, вернемся к 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, просто не совсем удобно получается |
| Часовой пояс GMT +3, время: 05:45. |