Javascript-форум - Можно ли "повесить" внутренние функции на кнопки?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Можно ли "повесить" внутренние функции на кнопки? (https://javascript.ru/forum/misc/60517-mozhno-li-povesit-vnutrennie-funkcii-na-knopki.html)

Цитата:

я думал, что вызвав функцию main и вернув из неё обработчик, он (обработчик) будет доступен (благодаря замыканию).

Можно, Рони показал как: в обработчик надо ставить результат вызова функции main.

Можно еще то же самое, но не программно, а через аттрибут onclick кнопки:

<script>
function main() {
    "use strict";
    var tmr;
    function stopMove ()    { clearInterval(tmr); }
    function startMove ()   { tmr = setInterval(moveBtn, 24); }
      
    function moveBtn() { //Объявляй уж в одном стиле
        var btn = $("#btn");
        var left = parseInt( btn.css("margin-Left") ) + 1;
        btn.css("margin-Left", left + "px");
    };
     
    return startMove;
};
</script>
<button onclick="main()">Click me!</button>

Только не особо увлекайся с этими плясками. Если просто играешься - окей, но в продакшн старайся писать как можно проще.

Цитата:

а что не так я сделал?

Написал два фрагмента кода в разном стиле.
Да, тоже касательно этого отрывка, сразу не заметил: Function Declaration внутри блока - это уже ES6, так что в старых браузерах оно не заработает.

Erolast,
вот код страницы - не работает :(

<!doctype html>
<html>
	<head>
		<meta charset="utf8">
		<title>Макет!</title>
		<script src="js/jQuery.js"></script>
		<script>
			function main() {
				"use strict";
				var tmr;
				function stopMove ()    { clearInterval(tmr); }
				function startMove ()   { 
					tmr = setInterval(moveBtn, 24); 
					console.log("We START!!!");
				}
				
				function moveBtn() { //Объявляй уж в одном стиле
					var btn = $("#btn");
					var left = parseInt( btn.css("margin-Left") ) + 1;
					btn.css("margin-Left", left + "px");
				};
				
				return startMove;
			};
		</script>
	</head>
	
	<body>
		<header>
		</header>
		
		<main>
		       <img id="btn" src="img/button.gif">
		 </main>
		
		<footer>
			<input type='button' value='START' onclick='main()'> 
		</footer>
		
	</body>
</html>

Цитата:

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

onclick='main()()'

рони,
"Семён Сенёнович... А-а-а!" (с) :victory:
А как на другую кнопку повесить функцию stopMove() ? Как из main() вернуть 2 функции?

Keramet,
возвращайте обьект {stopMove :stopMove , startMove : startMove } тогда main().stopMove() и main().startMove()

а лучше main = main()

Цитата:

Сообщение от рони (Сообщение 402642)

а лучше main = main()

сорри - вот это не понял :(

Keramet,

<!doctype html>
<html>
	<head>
		<meta charset="utf8">
		<title>Макет!</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<script>
			function main() {
				var tmr;
				function stopMove ()    { clearInterval(tmr); }
				function startMove ()   {
				    stopMove ();
					tmr = setInterval(moveBtn, 24);
					console.log("We START!!!");
				}

				function moveBtn() {
					var btn = $("#btn");
					var left = parseInt( btn.css("margin-Left") ) + 1;
					btn.css("margin-Left", left + "px");
				};

				return  {stopMove :stopMove , startMove : startMove } ;
			};
           main = main()
		</script>
	</head>

	<body>
		<header>
		</header>

		<main>
		       <img id="btn" src="img/button.gif">
		 </main>

		<footer>
			<input type='button' value='START' onclick='main.startMove()'>
            <input type='button' value='STOP' onclick='main.stopMove()'>
		</footer>

	</body>
</html>

рони,
а со stopMove() не работает почему-то. я проверил таймер tmr, пишет undefined. Может его тоже в объекте возвращать из main() ? Или лучше его из startMove() возвращать?

Цитата:

Сообщение от рони (Сообщение 402645)

<script>
  function main() {
		....
  };
  main = main()
</script>

2 вопроса:
1) перед main = main() var нужен?
2) а может лучше заменить объявление функции на функциональное выражение? (var main = function () {...} )

Keramet,
1 нет
2 как хочешь, можно так
var main = (function () {...} )())