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

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

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


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

    samdeweb
    @samdeweb
    Начинающий верстальщик
    Здравствуйте. Смотрите, есть методологии типо БЭМ и прочих, которые помогают людям в наименовании классов.
    Сначала про то, нужны ли вообще классы? - Конечно да.
    Просто если использовать вариант с меньшим количеством классов, то так наш код будет меньше и чище.

    Я не совсем согласен. Представим у вас более-менее большой проект, который уже работает и вы должны вносить изменения или просто работать с кодом. Когда вы откроете код - в большинстве случаев вы ничего не поймёте, особенно если там у вас есть например большие SVG и вообще много кода. Классы помогут во первых ориентироваться и не потеряться в коде. Если вы правильно назначили классы, вы в любой момент можете найти его и работать с нужным элементом. Советую изучить БЭМ методологию наименования. Она сначала кажется бесполезной, но поверьте, это мощный "инструмент" при вёрстке больших макетов.

    Что касается того, чтобы прописать один и тот же код - я не вижу смысла. Да, может по БЭМ иногда даже нужно так сделать(если изучите - поймёте о чём я). Но вообще, если вы дали body какой то параметр, смысла давать его повторно другим элементам нет, они всё равно наследуются автоматический.
    Ответ написан
  • Почему при клике обработчик не срабатывает?

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

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

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


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

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

    samdeweb
    @samdeweb
    Начинающий верстальщик
    Здравствуйте. Как уже упомянули, лучше кнопки делать кнопками. Но функционал калькулятора вы всё равно будете писать на JavaScript. Там конечно неважно div это или кнопка, но раз уж для кнопки сделали отдельный элемент - то его точно стоит использовать. Если вы с JavaScript вообще не знакомы - рекомендую сначала выучить этот язык. Потом уже станет понятно как реализовать функционал калькулятора. Код, по моему, никто не будет писать вместо вас, так что учитесь, поищите в интернете и точно найдёте то, что вам понадобится.
    Ответ написан
    Комментировать
  • Как написать такую кнопку на чистом JS, без jquery?

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

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

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