• Как поменять картинки при клике на кнопку?

    lina666
    @lina666
    Изучаю веб ЯП.
    В твоем коде в целом все не совсем корректно, вот готовый пример, рабочего, с комментами, попробуй разобрать его, думаю станет понятно и сможешь свой поправить.
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .row {
                display: flex;
                flex-wrap: wrap;
            }
            .picture-block {
                flex: 0 0 50%;
            }
            .picture-block__img {
                width: 300px;
                height: 400px;
            }
            .button.--active {
                background: green;
            }
    
    
        </style>
    </head>
    <body>
    <div class="row">
        <div class="picture-block">
            <img
                    class="picture-block__img"
                    src="https://klike.net/uploads/posts/2021-12/1638345229_2.jpg"
                    alt=""
            >
            <div class="picture-block__control">
                <button
                        type="button"
                        class="button --active"
                        data-img="https://klike.net/uploads/posts/2021-12/1638345229_2.jpg"
                >
                    left
                </button>
                <button
                        type="button"
                        class="button"
                        data-img="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwGZ9e0gkF00Cew42Qi2FjfZAUd7QNDp-6V0IjU-FR&s"
                >
                    right
                </button>
            </div>
        </div>
        <div class="picture-block">
            <img
                    class="picture-block__img"
                    src="https://klike.net/uploads/posts/2021-12/1638345229_2.jpg"
                    alt=""
            >
            <div class="picture-block__control">
                <button
                        type="button"
                        class="button --active"
                        data-img="https://klike.net/uploads/posts/2021-12/1638345229_2.jpg"
                >
                    left
                </button>
                <button
                        type="button"
                        class="button"
                        data-img="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwGZ9e0gkF00Cew42Qi2FjfZAUd7QNDp-6V0IjU-FR&s"
                >
                    right
                </button>
            </div>
        </div>
    </div>
    
    
    
    <script>
    // Находим все кнопки
    document.querySelectorAll('.button')
        // Проходимся циклом по каждой
        .forEach(btn => {
            // Навешиваем на каждую слушатель, что бы при клике на кнопку срабатывала данная функция, можно повесить на родительский элемент и слушать клики внутри него
            // что бы не искать родителя в changeImage где то на это есть статья в learnJS, найди сам, я забыл как называется влом искать.  
            btn.addEventListener('click', changeImage)
        })
    function changeImage(event) {
        // Если кнопка активна и показывается это изображение, ничего не делаем, можно накинуть более конкретных проверок, например сравнивать url и т.д, но мне лень.
        if (event.target.classList.contains('--active')) {
            return
        }
        // event.target - кнопка по которой нажали - я как правило использую this и делаю все через ООП, но сейчас мне лень
    
        // Корневой элемент
        const parent = event.target.closest('.picture-block')
        // Все кнопки управления
        const controlButtons = parent.querySelectorAll('.button')
        // Блок с картинкой для замены
        const imgNode = parent.querySelector('.picture-block__img')
    
        if (event.target.dataset.img) {
            // подставим картинки
            imgNode.src = event.target.dataset.img
            // Удалим подсветку со всех кнопок
            controlButtons.forEach(i => i.classList.remove('--active'))
            // Добавим на нашу кнопку активный класс, для подсветки
            event.target.classList.add('--active')
        } else {
            console.error('img not found')
        }
    
    
    }
    </script>
    </body>
    </html>
    Ответ написан
    Комментировать
  • Как сделать диаграмму?

    netcrox
    @netcrox
    Всё время женат
    Вычисляй относительную длину шкалы, твой синенький div будет примерно таким:

    .statusbar {
        height: 15px;
        border-radius: 15px;
        background-color: blue;
    }


    Вычисленную относительную длину каждого бара вбивай в инлайновый стиль (все способы подсказывать тут не вижу смысла):

    <div class="statusbar" style="width=15%"></div>
    <div class="statusbar" style="width=65%"></div>
    <div class="statusbar" style="width=98%"></div>
    ...
    <div class="statusbar" style="width=5%"></div>


    Дальше как фантазия подскажет. Я только направление подсказал
    Ответ написан
    Комментировать
  • Как сделать диаграмму?

    mahmudchon
    @mahmudchon
    https://www.chartjs.org/docs/latest/charts/bar.htm...
    Вариант с хорошей документацией, легкий в применении. Вариантов других диаграмм также масса.
    Ответ написан
    Комментировать
  • Как сделать счетчик ввода значений?

    DanArst
    @DanArst Куратор тега CSS
    Гриффиндор в моде при любой погоде!
    Раз можно вводить только цифры, то используйте input[type="number"], а не input[type="text"].
    Ответ написан
    Комментировать
  • Как сделать линейную диаграмму chart.js?

    coderisimo
    @coderisimo
    За всю стилизацию не скажу, но ... Как сделать шкалу справа :

    scales: {
       yAxes: [{
        display: true,
        position: 'right', <--- ЭТО ОНО!
        ticks: {
         beginAtZero: false,
         max: 2000,
         min: 1000,
         stepSize: 100
        }......
       }


    дока, смотрите Axis Position

    Градиент. Вроде есть плагин
    https://github.com/kurkle/chartjs-plugin-gradient
    Ответ написан
    Комментировать
  • Как добавить header когда страница скролится вверх?

    DanArst
    @DanArst Куратор тега CSS
    Гриффиндор в моде при любой погоде!
    Ответ написан
    2 комментария
  • Калькулятор js: на основании объема рассчитать количество машин?

    @MrColdCoffee
    web
    Math.ceil(totalVolume.toFixed(2)/25)
    Ответ написан
    Комментировать
  • Калькулятор js: на основании объема рассчитать количество машин?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    Ответ написан
    Комментировать
  • Можно ли у swiper js убрать навигацию если слайдов меньше 5?

    DanArst
    @DanArst Куратор тега JavaScript
    Гриффиндор в моде при любой погоде!
    Если у вас отображается по 5 слайдов и общее количество равно 5, то у стрелок навигации будет класс .swiper-button-disabled. Просто добавьте следующий стиль:
    .swiper-button-disabled{
        display:none;   
    }
    Ответ написан
    Комментировать
  • Как сделать трапецию с закруглёнными углами?

    hahenty
    @hahenty
    ('•')
    вариант
    Ответ написан
    Комментировать
  • Как делается кнопка "скопировать"?

    Maksclub
    @Maksclub
    maksfedorov.ru
    Ответ написан
    Комментировать
  • Альтернатива document.execCommand?

    @Hi-Pyncho
    Можно использовать Clipboard API, так как в самой MDN предупреждают, что лучше избегать использование document.execCommand

    Например, у тебя есть кнопка "Скопировать", которая скопирует содержимое нужного элемента в буфер обмена.

    const copyButton = document.querySelector('.button')


    Вешаешь обработчик события на эту кнопку и через объект Navigator записываешь в Clipboard нужный фрагмент текста

    copyButton.addEventListener('click', () => {
      window.navigator.clipboard.writeText(input.value)
    })


    И теперь нужный текст в буфере обмена
    Ответ написан
    1 комментарий