javascript change height based on element's height

Question

I need to set the height of an element equal to a div's height which height changes based on the elements inside it

I made this javascript code but it doesn't work.

What is wrong with it?

HTML

<div id="a" onclick="changeHeight();">
</div>
<div id="button">
</div>

JAVASCRIPT

function changeHeight() {
var divHeight = $("#a").height();
document.getElementById('button').style.height = divHeight;
}

CSS

#a{width:300px;height:100px;background-color:black;}
#button{width:300px;background-color:green;}

See https://stackoverflow.com/questions/10976700/how-to-set-the-height-of-an-button-input-element-on-webkit-browsers — neuhaus, Oct 24 '16 at 11:30
Your fiddle first throws an error that `changeHeight` is not defined when the element is clicked - that because you embedded the script code in the fiddle on load, you need to place it in the head. And then the next error is of course about `$`, because you neglected to actually embed jQuery. — CBroe, Oct 24 '16 at 11:30

Rayon · Answer 1 · 2016-10-24T11:41:41.847

Do concatenate with 'px'(Unit)

function changeHeight() {
  var divHeight = $("#a").height();
  document.getElementById('button').style.height = divHeight + 'px';
}

#a {
  width: 300px;
  height: 100px;
  background-color: black;
}
#button {
  width: 300px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="a" onclick="changeHeight();"></div>
<div id="button"></div>

score 1 · Answer 2 · answered Oct 24 '16 at 11:31

Why are you mixing jQuery and vanilla Js? I wrote it completely with jQuery and it looks like it's working:

function changeHeight() {
  var divHeight = $("#a").height();
  $('#button').height(divHeight);
}

#a{width:300px;height:100px;background-color:black;}
#button{width:300px;background-color:green;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a" onclick="changeHeight();">
</div>
<div id="button">
</div>

DibsyJr · Accepted Answer · 2016-10-24T11:43:20.100

Updated fiddle: https://jsfiddle.net/sne40vh1/3/

The main problem was that you were trying to set the height of #button without a unit of measurement (jQuery's .height method returns only a value, no measurement) so when you were trying to set the style in the vanilla JavaScript, which requires a unit of measurement, it was failing (so in this case it would've needed '300px' but you were just giving it '300'.

I've changed it here to have a global function (which isn't recommended, I only did this for the fiddle to work) and changed the way you were setting the height of #button to match the way you were getting the height of #a:

HTML:

<div id="a" onclick="changeHeight()"></div>
<div id="button"></div>

CSS:

#a{width:300px;height:100px;background-color:black;}
#button{width:300px;background-color:green;}

JS:

changeHeight = function() {
  var divHeight = $("#a").height();
  $('#button').height(divHeight);
}

Feel free to compare what i've done with what you had in the first place in order to see my changes better.

javascript change height based on element's height

3 Answers3