Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change div height on button click

What I do wrong? Why div height didn't change?

<html>
  <head>    
  </head>

<body >
    <button type="button" onClick = "document.getElementById('chartdiv').style.height = 200px">Click Me!</button>
    <div id="chartdiv" style="width: 100%; height: 50px; background-color:#E8EDF2"></div>
</body>
</html>
like image 362
Jim Avatar asked Nov 24 '11 10:11

Jim


2 Answers

Just a silly mistake use quote('') in '200px'

 <html>
  <head>    
  </head>

<body >
    <button type="button" onClick = "document.getElementById('chartdiv').style.height = '200px';">Click Me!</button>
    <div id="chartdiv" style="width: 100%; height: 50px; background-color:#E8EDF2"></div>
</body>

like image 122
Ariful Islam Avatar answered Oct 16 '22 09:10

Ariful Islam


Do this:

function changeHeight() {
document.getElementById('chartdiv').style.height = "200px"
}
<button type="button" onClick="changeHeight();"> Click Me!</button>

like image 21
Sudhir Bastakoti Avatar answered Oct 16 '22 10:10

Sudhir Bastakoti