Форум

shoopik · #1 (**permalink**) 22.07.2017, 16:10

Привет,
вопрос в следующем, если функция выглядит так:

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;
};

То нефига не работает, насколько я понял, если переменных нет внутри функции, то она ищет их снаружи ? Они же получаются объявлены до нее, почему она не хочет работать. То есть как вообще делают в таких ситуациях, если допустим две похожие функции как эти ?

laimas · #2 (**permalink**) 22.07.2017, 18:08

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

То нефига не работает

А что вы хотите от функции? Ваша, во-первых, она не запускается, а во-вторых ничего полезного и не делает, хотя рабочая.

shoopik · #3 (**permalink**) 22.07.2017, 18:20

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

А что вы хотите от функции? Ваша, во-первых, она не запускается, а во-вторых ничего полезного и не делает, хотя рабочая.

ну к примеру есть два инпута и 2 кнопки ( сложить и вычесть ), так вот две функции для сложения-вычитания и есть.
т.е. две функции почти одинаковые, за исключением одного знака, я спросил можно ли как-то вынести одинаковую часть и сократить код в самих функциях, и как вообще в таких случаях делают опытные

laimas · #4 (**permalink**) 22.07.2017, 18:31

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

так вот две функции для сложения-вычитания и есть.

Где? Есть одна, а то что второй раз прописано

function plus() {
    result = num1+num2;
}

так она ведь бесполезна. Это должно быть к примеру так

.....
document.getElementById('out').innerHTML = plus();
function plus() {
    return num1+num2;
}

Хотя так поступать в данном случае не стоит, функция должна принимать аргументы, с которыми производить операцию, возвращая результат. А прописать до нее все, а затем заставить сложить ранее определенное, в этом смысла нет.

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

две функции почти одинаковые, за исключением одного знака, я спросил можно ли как-то вынести одинаковую часть и сократить код в самих функциях,

Можно, передавая в функцию аргументом желаемое действие. Если передавать знак, то eval.

function operation(a, b, o) {
    return o ? a - b : a + b
}

alert(operation(12, 7))
alert(operation(12, 7, 1))

shoopik · #5 (**permalink**) 22.07.2017, 18:52

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

Где? Есть одна, а то что второй раз прописано

Я пропустил её, вот так я имел
ввиду:

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;
}

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

так она ведь бесполезна. Это должно быть к примеру так

.....
document.getElementById('out').innerHTML = plus();
function plus() {
    return num1+num2;
}

Если присвоить 'out' - 'plus', но там же есть еще и 'minus'.
Я закинул первоначальный код в планкер, чтобы было понятней что я хочу

:
https://plnkr.co/edit/yaCgZZQ8MWqKiIyByhrN?p=preview

рони · #6 (**permalink**) 22.07.2017, 18:56

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

код в планкер

можно и тут
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

shoopik · #7 (**permalink**) 22.07.2017, 19:51

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

можно и тут
О том, как вставить в сообщение исполняемый 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>

j0hnik · #8 (**permalink**) 22.07.2017, 20:57

выносить за функцию можно но вот это

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>

shoopik · #9 (**permalink**) 22.07.2017, 22:07

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

выносить за функцию можно но вот это

num1 = document.getElementById('n1').value;

будет выполняться при загрузке когда инпуты пусты.

вынести можно сами элементы, а в функции получать их актуальный на текущий момент value

Да да, вот это я и спрашивал

Но имеет ли смысл так делать, я имею "по уму" лучше выносить или нет ? И еще вопрос почему мы берем именно value, ведь если их убрать, работать не будет, может это как то обзывается в JS ? Ну чтобы я мог почитать об этом, чтоб получше понять

j0hnik · #10 (**permalink**) 22.07.2017, 22:55

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

Да да, вот это я и спрашивал

Но имеет ли смысл так делать, я имею "по уму" лучше выносить или нет ? И еще вопрос почему мы берем именно value, ведь если их убрать, работать не будет, может это как то обзывается в JS ? Ну чтобы я мог почитать об этом, чтоб получше понять

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

Форум

Справочник

Discord чат

Курсы javascript