Change CSS with Javascript

Asked

Viewed 81 times

0

I have this code:

function convert() {
  var bord = window.document.getElementById("borda")
  var b = Number(bord.value)
  document.getElementById("caixa").style.widht = "10px"
}
<div id="caixa" style="width: 100px; height: 100px; background-color: blue;"></div>
<form>
    <input id="borda" name="borda" type="number">
    <input type="button" value="BOTÃO" onclick="convert()">
</form>

By clicking the button the element does not change size.

javascript html css

  • If you just want to solve the immediate problem: document.getElementById('idDoElemento').style.width = "200px";

  • I’m a beginner, but follow the code there <div id="box" style="width: 100px; height: 100px; background-color: blue;"></div> <form> input id="edge" name" type="number"> <input type="button" value="BUTTON" onclick="Convert()"> </form> <script> Function Convert() { var Bord = window.document.getElementById("edge") var b = Number(Bord.value) Document.getElementById("box").style.widht = "10px" } </script>

  • to get the width var largura = window.document.getElementById("borda").value. If you don’t have the "px" in it you need a largura = ( largura + 'px' ); . then use the variable instead of 200px in my example.

1 answer

2


Came close, basically wrapped in syntax error.

  • style.widht is spelled wrong, is width.

then just concatenate the value with variavel + "px" (the unit you find relevant to your case)

Follows adjusted and simplified code:

function convert() {
  var largura = window.document.getElementById("borda").value;
  document.getElementById("caixa").style.width = largura+'px';
}
<div id="caixa" style="width: 100px; height: 100px; background-color: blue;"></div>
<form>
    <input id="borda" name="borda" type="number" value="200">
    <input type="button" value="BOTÃO" onclick="convert()">
</form>

Note that in its original code the ; at the end of the lines. In certain situations the JS even "understands", but it is good to avoid ambiguities.

  • 1

    Lindoooo Valeu!!!

  • @Lucas if the answer solved the problem mark it as correct please.

  • How do I know the answer is right?

Browser other questions tagged javascript html css

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