Написала код в соответствии с обучающим видеоуроком, но мой код не работает. Думаю с названия "CSS генератор" понятно, какой должен быть результат.
Код:
function fun2(){
var one = document.getElementsByName('one');
var two = document.getElementsByName('two');
var three = document.getElementsByName('three');
var four = document.getElementsByName('four');
var e1 = document.getElementsByName('e1').value;
var e2 = document.getElementsByName('e2').value;
var e3 = document.getElementsByName('e3').value;
var e4 = document.getElementsByName('e4').value;
var figure1=document.getElementsByClassName('figure1');
one.value=e1;
two.value=e2;
three.value=e3;
four.value=e4;
figure1.style.borderRadius= e1+"px"+e2+"px"+e3+"px"+e4+"px";
}
<style>
.figure1{
width: 200px;
height: 100px;
background-color: cadetblue;
}
</style>
<body>
<div class="block1">
<p>Top left:
<input type="range" name="e1" min="0" max="100" value="0" oninput="fun2()">
<input type="text" name="one">
</p>
</div>
<div class="block2">
<p>Bottom left:
<input type="range" name="e2" min="0" max="100" value="0" oninput="fun2()">
<input type="text" name="two">
</p>
</div>
<div class="block3">
<p>Top right:
<input type="range" name="e3" min="0" max="100" value="0" oninput="fun2()">
<input type="text" name="three">
</p>
</div>
<div class="block4">
<p>Bottom right:
<input type="range" name="e4" min="0" max="100" value="0" oninput="fun2()">
<input type="text" name="four">
</p>
</div>
<div class="figure1"></div>
</body>