Ответы пользователя по тегу JavaScript
  • Как сделать чтобы весь конкретный блок стал серым при нажатии на кнопку?

    samdeweb
    @samdeweb
    Начинающий верстальщик
    Здравствуйте. Примерно так должно работать.

    $(".button").click(function(){
        $(this).parent().css("background-color", "gray");  // Или как вы там хотите делать серый фон, например: addClass("gray");
    });


    Я так понял у вас проблема с выбиранием конткретного блока. В этом вам поможет $(this). Если просто, то $(this) - это именно тот элемент, на которой событие клик сработал.
    Ответ написан
  • Почему при клике обработчик не срабатывает?

    samdeweb
    @samdeweb
    Начинающий верстальщик
    Ответ Dima Polos более креативен, я объясню конкретнее)

    Скрипт нужно написать внизу страницы либо написать код для того, чтобы JavaScript запускался тогда, когда DOM уже загружен до конца. Примерно так:

    document.addEventListener('DOMContentLoaded', function(){
        // Здесь код
    });


    Причина того, что ваш код не работает в том, что элементы страницы не успевают загружаться тогда, когда JavaScript начинает свою работу. Соответсвенно, скрипт ищет элемент с id "btn" и не находит его. Дальше уже ясно что код не будет работать, поскольку такого элемента фактический нет.

    Поэтому либо переносим скрипт после input, либо с помощью кода выше. Успехов вам!
    Ответ написан
    2 комментария
  • Как написать такую кнопку на чистом JS, без jquery?

    samdeweb
    @samdeweb
    Начинающий верстальщик
    Здравствуйте. Увидел, что в комментариях ответили, но всё же свой вариант оставлю здесь, да и с анимацией:). Если понадобиться - можете использовать. Я тоже совсем недавно начал изучение JS, но что то простенькое мог набросать. Там написал комметарий к каждому действию, чтобы более менее понятнее было.

    https://jsfiddle.net/91pghxzt/1/

    P.S быстро набросал, по этому не использовал ваш свёрстанный шаблон.
    P.S.S. совет: если будете использовать этот код, сначала попробуйте понять каждую строчку, а не просто скопируйте его к себе. Это просто, на будущее :)
    Ответ написан
    5 комментариев