Две проблемы в JavaScipt (jQuery)

ErUnDAK · June 21, 2017

Дан код:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="script's.js"></script>

	<style>

		input {
			position: relative;
			transition: all ease 1s;
		}

	</style>

</head>
<body>
	<input id="val1" type="text"><br><br>
	<input id="val2" type="text"><br><br>
	<button>Посчитать!</button>
	<button id="lol">Сместить!</button>
</body>
</html>

И его скрипт:

$('document').ready(function() {

	$('button').on('click', function(){
		
		var value1, value2;

		value1 = $('#val1').val();
		value2 = $('#val2').val();

		value1 = parseInt(value1);
		value2 = parseInt(value2);

		value3 = value1 + value2;

		alert(value3);

	});

	$('button#lol').on('click', function() {
		$('#val1, #val2').css(
			{
			border: '2px solid red',
			left: '50px'
			}
			 );
	})

});

И первая проблема: при нажатии на кнопку "Сместить!" у меня вылетает алёрт со значением "NaN", а потом работает сам скрипт.
И вторая: почему в коде не работает плавное смещение вправо? В html задал параметр стиля, но плавного перехода нет. Только плавная смена цвета.
Как исправить NaN и плавный переход?
Если возможно, объясните поподробнее.

Edited June 21, 2017 by ErUnDAK

Switch74 · June 21, 2017

NaN - обычно появляется когда с строковыми переменными делают то, что нужно делать с числовыми (приводите к нужному типу)
Задайте начальные параметры стиля, и используйте изменение класса, а не запись в style

ErUnDAK · June 21, 2017

11 час назад, Switch74 сказал:

NaN - обычно появляется когда с строковыми переменными делают то, что нужно делать с числовыми (приводите к нужному типу)
Задайте начальные параметры стиля, и используйте изменение класса, а не запись в style

"Задайте начальные параметры стиля, и используйте изменение класса, а не запись в style" - я не совсем понял этот момент.

Switch74 · June 22, 2017

$('#val1, #val2').addClass('newClass');

Николя223 · June 22, 2017

тут у вас ошибка в том, что вы сначала на все кнопки вешаете событие, а потом на вторую ещё одно

повешайте событие нормально на класс.

а на будущее - отключать on() можно $('.selector').off('click')

ErUnDAK · June 22, 2017

5 часов назад, Николя223 сказал:

тут у вас ошибка в том, что вы сначала на все кнопки вешаете событие, а потом на вторую ещё одно

повешайте событие нормально на класс.

а на будущее - отключать on() можно $('.selector').off('click')

Ошибку нашёл. Спасибо. Хотелось бы спросить, как можно написать код, чтоб при каждом нажатии мне вправо смещал input?

Sign In

Две проблемы в JavaScipt (jQuery)

Question

ErUnDAK

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Switch74

Link to comment

Share on other sites

ErUnDAK

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

Николя223

Link to comment

Share on other sites

ErUnDAK

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information