Откатить значения :root к значениям по умолчанию через js

Question

Всем привет, возник такой вопрос: Пишу приложение фото-фильтр, в котором использую переменные CSS для изменения значения фильтра (через input: range). Есть кнопка reset, нажав на которую сбрасываются фильтры к значениям по умолчанию. В приложении 5 фильтров, все на 0, а один на 100 сразу (из 200).

Вот так выглядит по умолчанию. Все настроила, кроме одного: ползунок сбрасывается на 0, а не на 100.

Вот код:

    let button = document.querySelector(".btn-reset");
    button.addEventListener('click', function () {
        allInputs.forEach(element => {
            const input = element.querySelector(".input");
            const output = element.querySelector(".output");
            
            input.value = 0;
            document.documentElement.style.setProperty(`--${input.name}`, input.value);
            document.documentElement.style.setProperty('--saturate', '100%');
            output.innerHTML = 0;
            
        });
        const saturate = document.getElementById("saturate");
        saturate.innerHTML = 100;
    
    });
}```

HTML:

```<main class="main">
    <div class="filters">
      <label class="container">
        Blur:
        <input class="input" name="blur" data-sizing="px" type="range" min="0" max="10" value="0" />
        <output class="output" name="result">0</output>
      </label>
      <label class="container">
        Invert:
        <input class="input" name="invert" data-sizing="%" type="range" min="0" max="100" value="0" />
        <output class="output" name="result">0</output>
      </label>
      <label class="container">
        Sepia:
        <input class="input" name="sepia" data-sizing="%" type="range" min="0" max="100" value="0" />
        <output class="output" name="result">0</output>
      </label>
      <label class="container">
        Saturate:
        <input class="input " name="saturate" data-sizing="%" type="range" min="0" max="200" value="100" />
        <output class="output" id="saturate" name="result">100</output>
      </label>
      <label class="container">
        Hue rotate:
        <input class="input" name="hue" data-sizing="deg" type="range" min="0" max="360" value="0" />
        <output class="output" name="result">0</output>
      </label>
    </div>
    <div class="editor">
      <div class="btn-container">
        <button class="btn btn-reset" onclick="reset()">Reset</button>
        <button class="btn btn-next btn-active">Next picture</button>
        <label class="btn btn-load" for="btnInput">
          Load picture
          <input class="btn-load--input" id="btnInput" name="upload" type="file" placeholder="Load picture" />
        </label>
        <button class="btn btn-save">Save picture</button>
      </div>
      <img src="assets/img/img.jpg" alt="image" />
    </div>
  </main>```


Функционал работает, кроме ползунка.. уже голову сломала

Answer 1

это ваша первая работа?

let allInputs = document.querySelectorAll('input')
button.addEventListener('click',e => {
    allInputs.forEach(e => {
        if(e.value){
            e.value = e.getAttribute('value')
        }
    });
});

<button class="btn btn-reset" onclick="reset()">Reset удали то что отметил в html

БЛОГ НА HUSL

Откатить значения :root к значениям по умолчанию через js

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