Area of parallelogram function, javascript

<h2>Area of a Parallelogram (A = base * height)</h2>
    <form>
    <label class = "left">Base: </label> <input id = "parallelogramAreaBase" type = "text" class = "right" /> <br />    
    <label class = "left">Height: </label> <input id = "parallelogramAreaHeight" type = "text" class = "right" /> <br />
    <label class = "left">Answer: </label> <input id = "answerAreaParallelogram" type = "text" class = "right" /> <br />
    <input type = "submit" value = "Submit" onclick = "areaParallelogramFunction(); return false" />
    </form>

function areaParallelogramFunction(base, height)
{
    base = document.getElementById("parallelogramAreaBase").value;
    height = document.getElementById("parallelogramAreaHeight").value;
    var answer = base * height;
    document.getElementById("answerAreaParallelogram").value = answer;
}

I am unsure why this code is not working. It seems like a simple program, please help.

Solution

I know this is an answer block, but I'd like to take this space to provide some learning for you instead of resolving your problem as it stands. This new solution should make the correct result more clear to you (hopefully).

I started by changing your HTML ever so slightly:

<h2>Area of a Parallelogram (A = base * height)</h2>
<form id="areaForm">
    <label class="left">Base: </label> <input name="base" type="text" class="right" /><br />    
    <label class="left">Height: </label> <input name="height" type="text" class="right" /><br />
    <input type="submit" value="Solve" /><br />
    <label class="left">Answer: </label> <input name="answer" type="text" class="right" disabled />
</form>

So what did I change? First you might notice I put the answer after the button. That was a style choice by me as the Answer is not part of the form but instead a place to show the result. Also not that I added disabled to it. This is because the user shouldn't be able to edit the answer, the answer is presented by the program and is not an editable field.

Another thing you'll notice is those incredibly long, descriptive ids are gone and instead are short names. The names will play a role in the JavaScript and will make life a bit easier for us. Also note that I've added an id to the form that describes the form. This also applies to the fields in the form. The areaForm base field has only one meaning here, no need for areaFormBaseValue or similar style name.

Next up is the JavaScript.

// Let's fetch the form to begin with, we'll be using it.
// Notice the use of 'var', ALWAYS use 'var' when you 
// create a new variable. ALWAYS.
var form = document.getElementById("areaForm");

// Let's add the event a much better way, mingling logic
// (javascript) in your HTML is considered bad practice.
form.onsubmit = function() {
    // We chain the var statement with a comma, this is the
    // exact same as making two seperate var statements.
    // Now you can see we also calculate the result in this var
    // statement.
    var base = parseFloat(form.base.value),
        height = parseFloat(form.height.value),
        answer = base * height;

    form.answer.value = answer;

    // We return false here to prevent the form to be submitted naturally
    return false;
};

I remove the reference to the function call form the HTML - this is frowned upon in modern web development and is part of the "separation of concerns". HTML is a place where you define the layout of your view, CSS lets you define how the view appears to the user, and JavaScript defines how the view can be interacted or mutated. All of this data should be completely separate from each other - meaning no inline styles or inline JavaScript (use <style> and <script> tags instead).

I've included some comments so you can kind of see what's going on. But what's not included in the comments is accessing the fields. Notice once we fetch the form element we can simply access those fields by their name. This makes the function very small (character wise) which also makes it much easier to read and follow.

I've also added in calls to parseFloat which will take a string (from the type="text" field) value and convert into a floating point number. It's important to convert the value to a number. This will (if you add in some more code) allow you to detect if invalid input has been entered and makes it explicitly clear what your intentions are with the code.

Finally, here's a link to a working Fiddle you can play with

SIDE NOTE

Your button is defined as a "submit" input which is going to force submit your form, the click will be ignored. You can try by making it a "button" instead which then makes the trailing return false; unnecessary but I urge you to review the bits above and look into modern JavaScript development and avoid pitfalls that can arise from embedding all of this muck in your HTML.