Why doesn't bar1.style.height = desired_value; get assigned the value?

I am grabbing the values from two Excel cells successfully (based on this post, Read Data From Excel - #100 by surajkay19). That is, I can grab the values and display them using innerHtml. However, using bar1.style.height = desired_value; will not style the divs. The divs stay as height = 0. Why doesn’t the script work? I don’t get any errors in the console.

HTML:

<p><strong>Output A1:</strong> <span id="first"></span></p>
<p><strong>Output B2:</strong> <span id="second"></span></p>

<div style="height:auto;">
<div id="bar1" style="width: 30px; background-color: red;"></div>
<div id="bar2" style="width: 30px; background-color: green;"></div>
</div>

RELEVANT JAVASCRIPT, CSS

	var desired_value = (desired_cell ? desired_cell.v : undefined);
	var first1 = document.getElementById('first');
	first1.innerHTML = desired_value; /* this works */
	var bar1 = document.getElementById('bar1');
	bar1.style.height = desired_value; /* does not work. results in height == 0 */
        
	var desired_value2 = (desired_cell2 ? desired_cell2.v : undefined);
	var second2 = document.getElementById('second');
	second2.innerHTML = desired_value2; /* this works */        
	var bar2 = document.getElementById('bar2');
	bar2.style.height = desired_value2; /* does not work. results in height == 0 */

Ha! got it:

bar1.style.height = desired_value + “px”;

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.