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

Asked

Viewed 1,038 times

1

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>

2 answers

4

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>

  • Gosh, I’m missing things too simple. Obg for help!

  • I could only read your question now.... But it is already well answered!

3


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.

  • 1

    0 pq between bracket ? Thanks for the help.

  • @Victor Editei the answer.

  • 1

    I’m sorry I didn’t answer before, I’m kind of starting on Js. I haven’t gotten far yet and haven’t seen array(just seen in php). Thanks for the reply and I have no choice but to study rsrsrs.

  • SS, got agr thank you so much for the explanation. add in skype: vitim_fernandes

  • @Victor added, I’m not sure if I found your account right :v, are several people of the same name

Browser other questions tagged

You are not signed in. Login or sign up in order to post.