Javascript-форум - Добавление background-X

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Добавление background-X (https://javascript.ru/forum/dom-window/74684-dobavlenie-background-x.html)

Я если честно запутался) Подскажите, как переправить чтобы инпуты срабатывали? п.с. Попробую сделать с просмотром)) Секунду)

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }

      ul li {
        list-style: none;
        display: inline-block;
      }

      .back_style {
        font-size: 16px;
      }

      #back {
        width: 267px;
        height: 267px;
        background-color: rgb(0, 0, 0);
        display: flex;
        position: relative;
      }

      .d-flex {
        display: flex;
        margin-bottom: 1rem;
      }

      .space-around {
        justify-content: space-around;
      }

      .flex-column {
        flex-direction: column;
      }

    </style>

    <body>

      <div class='d-flex'>
        <p>background-image:</p>
        <ul>
          <li>url(<input type='text' id='bgImage' value="https://javascript.ru/cat/list/donkey.gif">);</li>
        </ul>
      </div>

      <div class='d-flex space-around'>
        <div class='mr-2'>
          <h5>background-repeat:</h5>
          <ul class='d-flex flex-column'>
            <li><input type='radio' name='repeat' id='norep' checked><label for='norep'>no-repeat</label></li>
            <li><input type='radio' name='repeat' id='repXY'><label for='repXY'>repeat</label></li>
            <li><input type='radio' name='repeat' id='repX'><label for='repX'>repeat-x</label></li>
            <li><input type='radio' name='repeat' id='repY'><label for='repY'>repeat-y</label></li>
          </ul>
        </div>
        <div class='mx-2'>
          <h5>background-size:</h5>
          <ul class='d-flex flex-column'>
            <li><label id='bnoradio'><input type='number' id='sizeIn' value='150' name='size' class='adstl bsize'> px</label></li>
            <li class='bsckeck'><input type='checkbox' id='sizeOne' name='size'><label for='sizeOne'>cover</label></li>
            <li class='bsckeck'><input type='checkbox' id='sizeTwo' name='size'><label for='sizeTwo'>contain</label></li>
          </ul>
        </div>
        <div class='ml-2'>
          <h5>background-position:</h5>
          <ul class='d-flex flex-column'>
            <li>Left: <label><input id='posX' type='number' min='0' max='100' value='50' class='adstl bsize'> %</label></li>
            <li>Top: <label><input id='posY' type='number' min='0' max='100' value='70' class='adstl bsize'> %</label></li>
          </ul>
        </div>
      </div>

      <div id='back'></div>

      <script>
        var back = document.querySelector("#back"),
          x = document.querySelector("#posX"),
          y = document.querySelector('#posY'),
          so = document.querySelector('#sizeOne'),
          st = document.querySelector('#sizeTwo'),
          si = document.querySelector('#sizeIn');
        (style = () => {
          back.style.background = `url(${document.querySelector("#bgImage").value}) black ${document.querySelector('[name="repeat"]:checked').parentNode.textContent} ${x.value}% ${y.value}%`;
          back.style.backgroundSize = so.checked ? 'cover' : st.checked ? 'contain' : si.value + 'px';
        })();
        document.querySelectorAll('input').forEach(el => el.oninput = style);

      </script>
    </body>
  </head>

</html>

Получилось))
Я слегка подкорректировал, в принципе и так нормально, но такие тонкости не все поймут, психанут и закроют страничку)

madeas,
Что-то я в результате не понял, почему у вас раньше не работало?

Dilettante_Pro,
не работают только радио и чеки. Вернее работают, но после изменений в других полях. Я так понял, что это браузер так себя ведет, хз почему. Так что оставлю пока как есть, может со временем приду к нужному решению.

madeas,
а смотрели последнюю версию пост 12?
Работают радио?
Можно также с использованием варианта Nexus

Dilettante_Pro,
пробовал. это браузер. на телефоне в хроме норм, в других браузерах тоже по разному, но работают.

Попробуйте вот этот вариант back.style.background

back.style.background = 'url(' + document.querySelector("#bgImage").value+') black '+ document.querySelector('[name="repeat"]:checked').parentNode.textContent +' '+x.value+'% '+y.value+'%';

Dilettante_Pro, я так и начал с ', но потом запутался стер и поставил ` они удобней =)

j0hnik,
Да я уже всячески с бубнами танцую - у ТС что-то странное...
Стоит посмотреть в консоли насчет ошибок и назначения обработчиков

ЗЫ:

Цитата:

Сообщение от j0hnik

и поставил ` они удобней

в IE Edge выдает ошибку неправильный символ

Dilettante_Pro,
так это же тоже самое фактически) не помогает. Это всетаки хромиум убонтовский так работает. Жаль что нельзя оставить 2-3 браузера с одинаковой поддержкой, а остальные заблокировать нафиг))