Вход

Просмотр полной версии : не так работает событие click

ghost666
15.05.2018, 11:44
всем привет!

есть div
<div class="menu-o">
ему присваивается класс
TweenMax.set('.menu-o', {className: '+=openmenu'});

и по этому классу событие
$('.openmenu').click(function() {

TweenMax.to('.blackfonmenu' , 1, {transform: 'translateY(0)'});
TweenMax.set('.menu-o', {className: '-=openmenu'});
TweenMax.set('.menu-o', {className: '+=closemenu'});


});

$('.closemenu').click(function() {
TweenMax.set('.menu-o', {className: '+=openmenu'});
TweenMax.set('.menu-o', {className: '-=closemenu'});
TweenMax.to('.blackfonmenu' , 1, {transform: 'translateY(-100vh'});

});

первая функция работает как нужно без проблем, а вторая вообще не работает. как побороть это, подскажите?
Спасибо!
Dilettante_Pro
15.05.2018, 14:16
<style>
.openmenu { border:1px solid green; }
.closemenu { border:1px solid red;}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="menu-o">div</div>
<script>
$('.menu-o').addClass('openmenu');

$('.menu-o').click(function() {
var trans = $(this).hasClass('openmenu') ? 'translateY(0)' : 'translateY(-100vh)';
$(this).toggleClass('openmenu closemenu');
alert(trans); // TweenMax.to('.blackfonmenu' , 1, {transform: trans});


});

</script>
Dilettante_Pro
15.05.2018, 14:26
TweenMax.to('.blackfonmenu' , 1, {transform: 'translateY(-100vh)'});
ghost666
19.05.2018, 09:57
огромное спасибо!
АндрейD
21.05.2018, 21:01
Можно вопрос в вашей теме? Почему у меня выдаёт ошибку на 4-й строке? Пишет, что "а" null. (1-я строка из html) Я в тупике, вроде бы всё верно.
1. <input type="submit" value="1" id="a">
2. <script>
3. var a = document.getElementById('a');
4. a.onclick = go;
5. function go() {
6. alert(a.getAttribute('value'));
7. }
8. <script>
j0hnik
21.05.2018, 22:24
АндрейD,

<input type="submit" value="1" id="a">
<script>
var a = document.getElementById('a');
a.onclick = go;
function go() {
alert(a.getAttribute('value'));
}
</script>


может не в этом куске кода дело?
рони
21.05.2018, 23:40
8. <script> ??? :-?
j0hnik
21.05.2018, 23:48
рони,
не из за этого ведь
Пишет, что "а" null
рони
21.05.2018, 23:56
j0hnik,
тогда строка 1 идёт после строки 8, других вариантов не знаю.
laimas
22.05.2018, 06:14
a.getAttribute('value')

https://learn.javascript.ru/attributes-and-custom-properties
АндрейD
22.05.2018, 09:25
АндрейD,

<input type="submit" value="1" id="a">
<script>
var a = document.getElementById('a');
a.onclick = go;
function go() {
alert(a.getAttribute('value'));
}
</script>


может не в этом куске кода дело?
Больше ничего нет, это задача. 1-я строка - это html страница, а <script> - прикреплённый файл js. Причём, если вызываю функцию onclick="go()" из html файла, вот так:

<input type="submit" value="1" onclick="go()" id="a">

а в js файл ставлю ту же строку:

function go() {
var elem = document.getElementById('a');
alert(a.getAttribute('value'));
}
то всё прекрасно работает. Но вызов

var a = document.getElementById('a');
a.onclick = go;

никак не идёт.
рони
22.05.2018, 09:53
АндрейD,
скрипт где после input или до?
АндрейD
22.05.2018, 10:01
Он в прикреплённом файле js. Но я пробовал этот код размещать и в html, после input. Не помогло.
АндрейD
22.05.2018, 10:09
Вот пробую, alert показывает, что переменная "a" null. Что то странно.
var a = document.getElementById('a');
alert(a);
рони
22.05.2018, 10:32
а в js файл ставлю ту же строку:

function go() {
var elem = document.getElementById('a');
alert(a.getAttribute('value'));
}
alert(elem.getAttribute('value'));
АндрейD
22.05.2018, 10:59
Извините за опечатку в приведённом примере - писал его тут по памяти. Вот из редактора:

<input type="submit" value="1" id="a">



var a = document.getElementById('a');
a.onclick = go;
function go() {
alert(a.getAttribute('value'));
}
рони
22.05.2018, 11:25
АндрейD,
работает?
<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>

<body>
<input type="submit" value="1" id="a">


<script>
var a = document.getElementById('a');
a.onclick = go;
function go() {
alert(a.getAttribute('value'));
}


</script>
</body>
</html>
АндрейD
22.05.2018, 12:14
Да, работает. Ничего не понимаю - сейчас тоже скопировал свой код из js файла в html и заработало. В чём тогда причина? Уж и 'use strict' удалил. Спасибо за помощь! Вот если бы ещё разобраться - почему из отдельного файла не получается.
АндрейD
27.05.2018, 22:12
Итак, ответ я нашёл в книге "Шаблоны JS". Оказывается размещать ссылку (типа <script src="js/file_js.js"></script>) на прикреплённый файл js в <head> - это худший антишаблон! Правильнее всего прописывать её в конце страницы, перед закрывающим тегом </body>. Я это сделал и всё заработало!
АндрейD
28.05.2018, 14:50
Про "антишаблон" - цитата из книги, написанной экспертом по языку JavaScript Стояном Стефановым – ведущим специалистом компании Yahoo! и создателем инструмента оптимизации производительности веб-страниц YSlow 2.0.
fslujrmu
16.06.2018, 13:42
Можно вопрос в вашей теме? Почему у меня выдаёт ошибку на 4-й строке? Пишет, что "а" null. (1-я строка из html) Я в тупике, вроде бы всё верно.
1. <input type="submit" value="1" id="a">
2. <script>
3. var a = document.getElementById('a');
4. a.onclick = go;
5. function go() {
6. alert(a.getAttribute('value'));
7. }
8. <script>
j0hnik
16.06.2018, 13:47
8 ая сторка
</script>
рони
16.06.2018, 13:51
fslujrmu,
если код именно такой, достаточно уточнить строку 8.
рони
16.06.2018, 13:51
fslujrmu,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:


... ваш код...



О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
chacow
19.06.2018, 11:59
Можно вопрос в вашей теме? Почему у меня выдаёт ошибку на 4-й строке? Пишет, что "а" null. (1-я строка из html) Я вWorld knowledge (https://ufoflicks.com) тупике, вроде бы всё верно.