JavaScript - If statement using .offsetHeight not working

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();