Работа всех элементов генератора CSS

195

22 августа 2017, 11:21

В уроке по JS oninput находится в файле HTML для каждого ползунка. Перенес все в JS, но oninput работает лишь для одного ползунка. Как сделать, чтобы функция вызывалась для всех ползунков сразу?

rtl.oninput = function fun1() { 
  var rtl = document.getElementById('rtl').value; 
  var rtr = document.getElementById('rtr').value; 
  var rbr = document.getElementById('rbr').value; 
  var rbl = document.getElementById('rbl').value; 
  var ttl = document.getElementById('ttl'); 
  var ttr = document.getElementById('ttr'); 
  var tbr = document.getElementById('tbr'); 
  var tbl = document.getElementById('tbl'); 
  var block = document.getElementById('block'); 
 
  ttl.value = rtl; 
  ttr.value = rtr; 
  tbr.value = rbr; 
  tbl.value = rbl; 
  block.style.borderRadius = rtl+'px ' +rtr+'px ' +rbr+'px ' +rbl+'px '; 
}

#block{ 
  height: 100px; 
  width: 200px; 
  background-color: green; 
}

  <body> 
    <div class="block1"> 
      <p>Верхний левый 
        <input type="range" id="rtl" min="0" max="100" value="0" class="test" > 
        <input type="text" id="ttl" value="0"> 
      </p> 
 
      <p>Верхний правый 
        <input type="range" id="rtr" min="0" max="100" value="0" class="test"> 
        <input type="text" id="ttr" value="0"> 
      </p> 
 
      <p>Нижний левый 
        <input type="range" id="rbl" min="0" max="100" value="0" class="test"> 
        <input type="text" id="tbl" value="0"> 
      </p> 
 
      <p>Нижний правый 
        <input type="range" id="rbr" min="0" max="100" value="0" class="test"> 
        <input type="text" id="tbr" value="0"> 
      </p> 
    </div> 
    <div id="block"></div> 
 
    <script src="script.js" type="text/javascript"></script> 
  </body>

Answer 1

Так хотите? Блок переместил на верх, чтоб лучше видно было.

const block = document.getElementById('block'); 
const rtl = document.getElementById('rtl'); 
const rtr = document.getElementById('rtr'); 
const rbr = document.getElementById('rbr'); 
const rbl = document.getElementById('rbl'); 
const ttl = document.getElementById('ttl'); 
const ttr = document.getElementById('ttr'); 
const tbr = document.getElementById('tbr'); 
const tbl = document.getElementById('tbl'); 
 
rtl.oninput = () => { 
    block.style.borderTopLeftRadius = `${rtl.value}px`; 
    ttl.value = rtl.value; 
} 
rtr.oninput = () => { 
    block.style.borderTopRightRadius = `${rtr.value}px`; 
    ttr.value = rtr.value; 
} 
rbr.oninput = () => { 
    block.style.borderBottomRightRadius = `${rbr.value}px`; 
    tbr.value = rbr.value; 
} 
rbl.oninput = () => { 
    block.style.borderBottomLeftRadius = `${rbl.value}px`; 
    tbl.value = rbl.value; 
}

#block{ 
  height: 100px; 
  width: 200px; 
  background-color: green; 
}

  <body> 
  <div id="block"></div> 
    <div class="block1"> 
      <p>Верхний левый 
        <input type="range" id="rtl" min="0" max="100" value="0" class="test" > 
        <input type="text" id="ttl" value="0"> 
      </p> 
 
      <p>Верхний правый 
        <input type="range" id="rtr" min="0" max="100" value="0" class="test"> 
        <input type="text" id="ttr" value="0"> 
      </p> 
 
      <p>Нижний левый 
        <input type="range" id="rbl" min="0" max="100" value="0" class="test"> 
        <input type="text" id="tbl" value="0"> 
      </p> 
 
      <p>Нижний правый 
        <input type="range" id="rbr" min="0" max="100" value="0" class="test"> 
        <input type="text" id="tbr" value="0"> 
      </p> 
    </div> 
 
    <script src="script.js" type="text/javascript"></script> 
  </body>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

htaccess и страница без стиля (Смотрите внутри)

Есть файлы: "htaccess", "index

262

HTML

Slick slider Изменение dots

Нужно чтобы картинки были разными, а при разрешении меньше 768px стали точками

376

HTML

Виджет канала Youtube

Всем привет, подскажите как сделать вот такой виджет канала Youtube http://prntscrcom/gars88 на сайт, искал в инете но ничего не нашел, только обычные кнопки...

198

перегрузка бинарных операторов c#

можно ли перегрузить бинарный оператор таким образом что бы передать в него больше двух параметров? Те как то так

268