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

Question

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

Navigation

#1 by (3 votes)
#2 by (2 votes)

0

I have div that I'm going to change the value borderRadius and it will round off. And I have a input that is of type range to control the rounding value.

And at the same time I'm going to display the value of range in the output tag.

I'm not getting round the html element, how can I do this?

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

javascript html5 css

asked by anonymous 30.08.2016 / 00:52

2 answers

3

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

I've made a change to your code, it's working now.

I hope I have 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>

30.08.2016 / 00:58

Error checking the IF with array in PHP Using data type modifiers

score 2 · Accepted Answer

You forgot to set the measure type to 'borderRadius' . You can declare 'px' in front of the value you are declaring.

(Now that I've seen @AndrewRibeiro's remark (I did not notice HTML much), so I edited the response code. document.getElementsByTagName , this method returns an object (similar to array), HTMLCollection , of HTML elements which contains 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';

Best explanation for this 0 between brackets

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

box['style']

is the same as

box.style .

The . point and the [...] brackets allow you to index objects with a specific value, this value returns a property of the object, or undefined . Therefore, 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

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

And, for more information, what document.getElementsByTagName returns is not an exactly array, it is a common object, however it may not include methods that Array has in JavaScript (type forEach , push , etc ...), but you can convete it to Array yes. I'm not claiming that the object will not include these methods, since one of its instances might include a similar method in prototype .