Можно ли "повесить" внутренние функции на кнопки?
Всем привет!
Вопрос такой: вот есть ДжС файл, который просто передвигает кнопку (типа анимация :write: ). Хочу нажать на кнопку, и она начинает двигаться. За начало "движения" отвечает функция start() Как задать её обработчику onclick на HTML странице? Так не работает: <input type='button' id="btn" onclick='startMove()'>
var main = function () {
"use strict";
var tmr;
function stopMove () { clearInterval(tmr); }
function startMove () { tmr = setInterval(moveBtn, 24); }
var moveBtn = function () {
var btn = $("#btn");
var left = parseInt( btn.css("margin-Left") ) + 1;
btn.css("margin-Left", left + "px");
};
return startMove;
};
$(document).ready(main);
|
Keramet,
на всякий случай start плохое имя для функции. |
startMove подойдёт? :agree: Исправил.
|
рони,
Исправление start() на startMove() не помогло :dance: шутка :) |
Keramet,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
var a;
$(function(){
var main = function () {
"use strict";
var tmr;
function stop() { clearInterval(tmr); }
function st() { tmr = setInterval(moveBtn, 24); }
var moveBtn = function () {
var btn = $("#btn");
var left = parseInt( btn.css("margin-Left") ) + 1;
btn.css("margin-Left", left + "px");
};
return st;
};
// a = main()
$("#btn").on({click : main()})
});
</script>
</head>
<body>
<input type='button' id="btn" value="click">
<!--<input type='button' id="btn" onclick='a()'>-->
</body>
</html>
|
рони,
У вас // a = main() вместо моего $(document).ready(main);? |
или конструкция $(function(){.... то же, что и $(document).ready(main); ?
|
а где сам вызов st() из строки 18:
function st() { tmr = setInterval(moveBtn, 24); }
и не совсем понял, зачем
$("#btn").on({click : main()})
мы ж на кнопку должны вроде повесить st() ? |
Цитата:
Цитата:
|
Цитата:
|
по клину на кнопке Вы запускаете функцию main, это вроде понятно. Я просто не пойму, где происходит вызов st(). Ведь внутри main она не вызывается, только определяется.
|
моя логика была такая: вот эти строки
var tmr;
function stopMove () { clearInterval(tmr); }
function startMove () { tmr = setInterval(moveBtn, 24); }
не определять в глобальном контексте, а сделать это внутри функции (в данном случае main), которая запуститься как только броузер построит ДОМ )) |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
смотрите ранее что возвращает main => return st; |
рони,
а, теперь вроде догоняю)) |
Keramet,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
var main = function () {
var tmr;
function stop() { clearInterval(tmr); }
function st() { tmr = setInterval(moveBtn, 24); }
var moveBtn = function () {
var btn = $("#btn");
var left = parseInt( btn.css("margin-Left") ) + 1;
btn.css("margin-Left", left + "px");
};
st()
return st;
};
$(main);
</script>
</head>
<body>
<input type='button' id="btn" value="click">
</body>
</html>
|
Цитата:
Если определить функции внутри другой функции, то они только в ней видны и будут. Обработчики событий на элементах выполняются в глобальной контексте, и, соответственно, ни о каких stopMove и startMove они знать в принципе не могут. Так что либо навешивай обработчик программно внутри функции main:
var main = function() {
"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");
};
$("#btn").on("click", startMove);
};
$(document).ready(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>
|
Цитата:
|
рони,
"Семён Сенёнович... А-а-а!" (с) :victory: А как на другую кнопку повесить функцию stopMove() ? Как из main() вернуть 2 функции? |
Keramet,
возвращайте обьект {stopMove :stopMove , startMove : startMove } тогда main().stopMove() и main().startMove() а лучше 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() возвращать? |
Цитата:
1) перед main = main() var нужен? 2) а может лучше заменить объявление функции на функциональное выражение? (var main = function () {...} ) |
Keramet,
1 нет 2 как хочешь, можно так var main = (function () {...} )()) |
Цитата:
Цитата:
Цитата:
Я бы лучше сделал как-то так:
<script>
var startMoving;
var stopMoving;
(function() {
"use strict";
var timer; //Зачем здесь сокращение?
startMoving = function() {
timer = setInterval(function moveButton() {
var target = $("#startMovingButton");
var offset = parseInt(target.css("margin-left")) + 1;
target.css("margin-left", offset + "px");
});
}
stopMoving = function() {
clearInterval(timer);
}
})();
</script>
<button id="startMovingButton" onclick="startMoving();">Start moving</button>
<button id="stopMovingButton" onclick="stopMoving();">Stop moving</button>
А вообще-то для подобного рода инкапсуляции в JS существует система модулей - https://learn.javascript.ru/modules. |
Цитата:
|
Нет, var не ставится потому, что переменная с названием main и так уже объявлена с помощью function main(){}. Функции в JS - сущности первого класса и тоже хранятся через помещение в переменную.
Собственно, любая функция - это объект-инстанс класса Function, наследника класса Object и имеет все признаки обычного объекта:
var func = function(){};
console.log(func.constructor == Function); // true
console.log(func instanceof Object); //true
func.property = 10;
func.property++;
console.log(func.property); //11;
Что насчет присвоения в глобал с помощью опущения var - да, такой трюк раньше действительно был возможен, но начиная с ES5 он запрещен. В строгом режиме попытка обращения к необъявленной переменной сгенерирует ошибку. |
Erolast,
Это я понял. Объясните мне, зачем в коде рони main = main()? |
main = main() - перезапись переменной main результатом вызова функции, находящейся (потом уже находившейся) в этой переменной.
Зачем? Нахрена-то) |
Цитата:
Спасибо за вразумительное объяснение )) |
| Часовой пояс GMT +3, время: 10:21. |