Помогите найти ошибку в коде JS к "CSS генератору"

Question

Написала код в соответствии с обучающим видеоуроком, но мой код не работает. Думаю с названия "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>

Answer 1

Пробелы между значениями:

figure1[0].style.borderRadius= e1+"px "+e2+"px "+e3+"px "+e4+"px";

Answer 2

Прежде всего, Вы получаете значения через getElementsByName, что подразумевает несколько значений.
Так же добавил для наглядности параметр s, в котором присваиваются данные полученные из объектов.
Так же забыли указать пробелы в borderRadius.

    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');
        var e2 = document.getElementsByName('e2');
        var e3 = document.getElementsByName('e3');
        var e4 = document.getElementsByName('e4');

        var figure1=document.getElementsByClassName('figure1');

        one[0].value=e1[0].value;
        two[0].value=e2[0].value;
        three[0].value=e3[0].value;
        four[0].value=e4[0].value;

        var s1 = one[0].value,
            s2 = two[0].value,
            s3 = three[0].value,
            s4 = four[0].value;
        figure1[0].style.borderRadius=  s1+"px "+s2+"px "+s3+"px "+s4+"px";
    }

    .figure1{
        width: 200px;
        height: 100px;
        background-color: cadetblue;
    }

<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>

БЛОГ НА HUSL

Помогите найти ошибку в коде JS к "CSS генератору"

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