Change the div border and at the same time show the value in another HTML tag

Question

I have a div that I’ll change the value borderRadius and she’ll round it up. And I have a input who’s kind range to control the rounding value.

And at the same time I will display the value of range on the tag output.

I’m not getting round the html element, how can I do that?

<div class="box" style="text-align: center;">
    <!--Div para arredondar-->
</div>

<label for="range">Borda:</label>
<input type="range" id="range" min="0" step="5" max="50" value="0" 
oninput="document.getElementById('rangeValor').value = document.getElementById('range').value;
document.getElementById('box').style.borderRadius = document.getElementById('range').value;"
>
<output id="rangeValor">0</output>%<br>

Answer 1

In addition to what @nicematt suggested, you are setting a class to the div and is trying to catch the element using getElementById.

I made a modification to your code, now it’s working.

I hope I’ve helped.

<div id="box" style="text-align: center; border: 1px solid">
  <!--Div para arredondar-->
  TESTE
</div>

<label for="range">Borda:</label>
<input type="range" id="range" min="0" step="5" max="50" value="0" oninput="document.getElementById('rangeValor').value = document.getElementById('range').value;
document.getElementById('box').style.borderRadius = document.getElementById('range').value + 'px';">
<output id="rangeValor">0</output>%
<br>

Answer 2

You forgot to define the type of measure in 'borderRadius'. You may declare 'px' in front of the amount you will declare.

(Now that I went to see the @Andrewribeiro remark (I didn’t notice much HTML), so I edited the answer code. document.getElementsByTagName, this method returns an object (similar to the array), HTMLCollection, of HTML elements containing a specific class.)

var range = parseFloat(document.getElementsById('range').value);

var box = document.getElementsByTagName('box')[0],
    output = document.getElementById('rangeValor');

output.value =
box.style.borderRadius = range + 'px';

---

Better explanation for this 0 between the square brackets

Basically, square brackets are a way to index an object computationally. Example:

box['style']

is the same as

box.style.

The point . and the clasps [...] allow you to index objects with a specific value, this value returns an object property, or undefined. So the point . only lets you index an object with a string in front. That is, box.style, here we index box with the string style.

Look at an example:

alert(({ hello: 'blabla' }).hello); // blabla
alert(({ hello: 'blabla' })['hello']); // blabla
alert(({}).hello); // undefined

Therefore you cannot index values of type undefined or null. You can only index numbers, etc... because they are instance of Object.

---

And for more information, what document.getElementsByTagName returns is not exactly an array, is a given object, but it may not include methods that Array has in Javascript (type forEach, push, etc...), but you can contact him for a Array yes. I am not stating that the object will not include these methods, as one of its instances may include a similar method in prototype.