Изменение цвета div с помощью слайдера на js

Question

при изменении, цвет квадрата не меняется

        document.querySelector(".range").oninput = change;
        let x = document.querySelector(".num").value
        function change(){
            document.querySelector(".num").value = document.querySelector(".range").value
            document.querySelector(".color").style.backgroundColor  = `rgb(${x},123,78);`
        }

        .content{
            width:310px;
            height:110px;
            display: flex;
        }
        .color{
            height:100px;
            width:100px;
            border:5px solid grey;
        }
        .flex{
            display: flex;
        }
        .num{
            width:30px;
            outline: none;
            text-align: center;
        }

    
    <div class = "content">
                        <div class = "left">
                            <div class = "color"></div>
                        </div>
                        <div class = "right">
                            <div class = "flex">
                                <p>Red</p>
                                <div class = "flex">
                                    <input type="text" class = "num">
                                    <input type="range" class = "range" min='0' max = "255">
                                </div>
                            </div>
                        </div>
                    </div>

Answer 1

У вас значение инпута неактуальное, так как находится вне функции, которая срабатывает по событию

document.querySelector(".range").oninput = change;

function change(){
  let x = document.querySelector(".num").value
  document.querySelector(".num").value = document.querySelector(".range").value
  document.querySelector(".color").style.backgroundColor  = `rgb(${x},123,78)`
}

 .content{
            width:310px;
            height:110px;
            display: flex;
        }
        .color{
            height:100px;
            width:100px;
            border:5px solid grey;
        }
        .flex{
            display: flex;
        }
        .num{
            width:30px;
            outline: none;
            text-align: center;
        }

   
    <div class = "content">
                        <div class = "left">
                            <div class = "color"></div>
                        </div>
                        <div class = "right">
                            <div class = "flex">
                                <p>Red</p>
                                <div class = "flex">
                                    <input type="text" class = "num">
                                    <input type="range" class = "range" min='0' max = "255">
                                </div>
                            </div>
                        </div>
                    </div>

Answer 2

это называется не "половина функции не работает", а "функция не работает" :)

у вас лишняя точка с запятой в стиле - уберите ее

document.querySelector(".color").style.backgroundColor = `rgb(${document.querySelector(".num").value},123,78)`;

        document.querySelector(".range").oninput = change;
        function change(){
            document.querySelector(".num").value = document.querySelector(".range").value;
            document.querySelector(".color").style.backgroundColor = `rgb(${document.querySelector(".num").value},123,78)`;
        }

        .content{
            width:310px;
            height:110px;
            display: flex;
        }
        .color{
            height:100px;
            width:100px;
            border:5px solid grey;
        }
        .flex{
            display: flex;
        }
        .num{
            width:30px;
            outline: none;
            text-align: center;
        }

    
    <div class = "content">
                        <div class = "left">
                            <div class = "color"></div>
                        </div>
                        <div class = "right">
                            <div class = "flex">
                                <p>Red</p>
                                <div class = "flex">
                                    <input type="text" class = "num">
                                    <input type="range" class = "range" min='0' max = "255">
                                </div>
                            </div>
                        </div>
                    </div>

БЛОГ НА HUSL

Изменение цвета div с помощью слайдера на js

Ответы (2 шт):