JavaScript - If statement using .offsetHeight not working

Question

I'm new to JavaScript and am practicing. I'm trying to display the combined height of the h1 and p elements that are within the div that has a class name of "test". I've looked up all sorts of stuff and feel like I'm really close, but can't quite get this to work. Anyone able to help?

HTML:

<div class="test">
    <h1>Understanding Scope</h1>
    <p>By understanding code's <em>scope</em>, we know when that code affects only one part of our code, or the entire codebase.  If we create things that are <em>global</em> in scope, we are giving any code the supreme power to control our code.   So we want to protect our code by being very careful when creating things that are global in scope. This is especially important if you plan on using JavaScript libraries like jQuery.</p>
</div>
<h1>Local Scope</h1>
<p>JavaScript uses <em>function scope</em>, meaning every time we create a new function the scope changes.  Any code inside that function is <em>local</em> to that function. Code that is local in scope is not accessible to outside code.</p>

JavaScript:

function testing(){
    if (document.getElementsByClass('test')){
        var headerHeight = document.getElementsByTagName('h1').offsetHeight;
        var textHeight = document.getElementsByTagName('p').offsetHeight;
        var totalHeight = headerHeight + textHeight;

        alert(totalHeight);
    }
}

testing();

What is it displaying at the moment? And where are you including the javascript (inline or externally)? — Brennan, May 28 '15 at 17:01
`document.getElementsByClass` and `document.getElementsByTagName` return NodeLists – you have to access a specific items in them via an array-like index, before you can access their properties. Also, you might be calling your function to early (before those elements even exist), depending on where exactly/how it is embedded. — CBroe, May 28 '15 at 17:02
I have an external JavaScript file. If I throw in alert("test"); inside the function, but before the if statement it will display that alert, but not the other one I'm expecting to get. As the code is above, it displays the HTML, but no alerts. — Bryan, May 28 '15 at 17:07

score 0 · Accepted Answer · answered May 28 '15 at 17:03

0

It is document.getElementsByClassName, not getElementsByClass, also you are getting arrays of h1 and p tags

function testing(){
    if (document.getElementsByClassName('test')){
        var headerHeight = document.getElementsByTagName('h1')[0].offsetHeight;
        var textHeight = document.getElementsByTagName('p')[0].offsetHeight;
        var totalHeight = headerHeight + textHeight;

        alert(totalHeight);
    }
}

testing();

answered May 28 '15 at 17:03

Kevin F

2,836
2
16
21

Ahh good catch on forgetting Name. This appears to be working. Thank you! – Bryan May 28 '15 at 17:10

score 0 · Answer 2 · answered May 28 '15 at 17:04

function testing(){
    if (document.getElementsByClassName('test')){

        var headerHeight = document.getElementsByTagName('h1')[0].offsetHeight;
        var textHeight = document.getElementsByTagName('p')[0].offsetHeight;
        var totalHeight = headerHeight + textHeight;

        alert(totalHeight);
    }
}

testing();

JavaScript - If statement using .offsetHeight not working

2 Answers2