In the JS lesson, oninput is in the HTML file for each slider. Transferred everything to JS, but oninput only works for one slider. How to make the function called for all sliders at once?

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>

    1 answer 1

    Do you want it? The block moved to the top, so that it was better seen.

     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>

    • Something like that, thanks. But what does the dollar sign mean? Is it jquery? I did not go to her - Egor
    • The dollar sign is a template string. Pro switch functions you understand? New syntax ec6. Nothing complicated there. - Nazar Kalytiuk