js функция (нуб-вопрос)
Привет,
вопрос в следующем, если функция выглядит так:
function plus() {
var num1, num2, result;
num1 = document.getElementById('n1').value;
num2 = document.getElementById('n2').value;
num1 = parseInt(num1);
num2 = parseInt(num2);
result = num1+num2;
document.getElementById('out').innerHTML = result;
};
То всё работает, делаю точно такую же на минус, всё ок. Но можно ли вынести переменные за функцию ? Если делаю так:
var num1, num2, result;
num1 = document.getElementById('n1').value;
num2 = document.getElementById('n2').value;
num1 = parseInt(num1);
num2 = parseInt(num2);
result = num1+num2;
document.getElementById('out').innerHTML = result;
function plus() {
result = num1+num2;
};
То нефига не работает, насколько я понял, если переменных нет внутри функции, то она ищет их снаружи ? Они же получаются объявлены до нее, почему она не хочет работать. То есть как вообще делают в таких ситуациях, если допустим две похожие функции как эти ? |
Цитата:
|
Цитата:
т.е. две функции почти одинаковые, за исключением одного знака, я спросил можно ли как-то вынести одинаковую часть и сократить код в самих функциях, и как вообще в таких случаях делают опытные :) |
Цитата:
function plus() {
result = num1+num2;
}
так она ведь бесполезна. Это должно быть к примеру так
.....
document.getElementById('out').innerHTML = plus();
function plus() {
return num1+num2;
}
Хотя так поступать в данном случае не стоит, функция должна принимать аргументы, с которыми производить операцию, возвращая результат. А прописать до нее все, а затем заставить сложить ранее определенное, в этом смысла нет. Цитата:
function operation(a, b, o) {
return o ? a - b : a + b
}
alert(operation(12, 7))
alert(operation(12, 7, 1))
|
Цитата:
ввиду:
var num1, num2, result;
num1 = document.getElementById('n1').value;
num2 = document.getElementById('n2').value;
num1 = parseInt(num1);
num2 = parseInt(num2);
result = num1+num2;
document.getElementById('out').innerHTML = result;
function plus() {
result = num1+num2;
};
function minus () {
result = num1-num2;
}
Цитата:
Я закинул первоначальный код в планкер, чтобы было понятней что я хочу :) : https://plnkr.co/edit/yaCgZZQ8MWqKiIyByhrN?p=preview |
Цитата:
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Цитата:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> <input type="text" id="n1">
<input type="text" id="n2"> <br><hr />
<button onclick="plus()">PLUS</button>
<button onclick="minus()">MINUS</button>
<hr>
<p id="out">Result:</p>
<script>function plus() {
var num1, num2, result;
num1 = document.getElementById('n1').value;
num2 = document.getElementById('n2').value;
num1 = parseInt(num1);
num2 = parseInt(num2);
result = num1+num2;
document.getElementById('out').innerHTML = result;
};
function minus() {
var num1, num2, result;
num1 = document.getElementById('n1').value;
num2 = document.getElementById('n2').value;
num1 = parseInt(num1);
num2 = parseInt(num2);
result = num1-num2;
document.getElementById('out').innerHTML = result;
};
</script>
</body>
</html>
|
выносить за функцию можно но вот это
num1 = document.getElementById('n1').value;
будет выполняться при загрузке когда инпуты пусты. вынести можно сами элементы, а в функции получать их актуальный на текущий момент value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> <input type="text" id="n1">
<input type="text" id="n2"> <br><hr />
<button onclick="plus()">PLUS</button>
<button onclick="minus()">MINUS</button>
<hr>
<p id="out">Result:</p>
<script>
var num1 = document.getElementById('n1'),
num2 = document.getElementById('n2'),
out = document.getElementById('out');
function plus() {
result = num1.value*1+num2.value*1;
out.innerHTML = result;
}
function minus() {
result = num1.value*1-num2.value*1;
out.innerHTML = result;
}
</script>
</body>
</html>
|
Цитата:
|
Цитата:
value это и есть значение в форме. |
| Часовой пояс GMT +3, время: 02:23. |