.innerhtml is not placing content in "DIV"

Question

I have the following function that should produce a result to a divs named "totalPrice" and "premPrice", however the .innerhtml doesn't seem to be placing the numbers in the div for some reason? Can you perhaps look over this piece of code and tell me possible reasons why it's not inputting the html? Since i am newer to the web languages, do you have to call the function? or when i simply define it is the function called?

html:

            <label class='next action-button'><input type="button"  name="tank" value="Yes" onclick="calculateTotal()" />Yes</label><br/>
 <p>standard and premium system specs</p>
    <br/>
                <div id="totalPrice"></div>
                <br/>
                <div id="premPrice"></div>

js:

function calculateTotal()
{

    var boilerPrice = getBoilerSizePrice() + getBedroomSizePrice() + getBathroomSizePrice()  + getTankSizePrice() ;

    //display the result
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Your New Boiler Install Price is £"+boilerPrice;

    var divobj = document.getElementById('premPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Premium price £"+((boilerPrice/100)*120);

}

You have to call the function. If every defined function was automatically called when the page loaded, there would be problems... — shadowfox, May 15 '14 at 17:41

score 4 · Answer 1 · edited May 23 '17 at 11:50

After writing a function, you need to call it somewhere. After the closing bracket of the function, trying calling it like this:

function calculateTotal()
{

    var boilerPrice = getBoilerSizePrice() + getBedroomSizePrice() + getBathroomSizePrice()  + getTankSizePrice() ;

    //display the result
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Your New Boiler Install Price is £"+boilerPrice;

    var divobj = document.getElementById('premPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Premium price £"+((boilerPrice/100)*120);

}

calculateTotal();

Edit: Based on your updated intention to call the function on click, I would note that it's considered bad practice to call JavaScript functions inline, and it might give you problems in some cases. Another way to do it is to attach the click event to your target element in your JavaScript code. Here's a jsfiddle using your code.

Basically, I removed the onclick="calculateTotal()" from your button and gave it an ID:

<input id="calc-button" type="button" name="tank" value="Yes" />

Then I added the following line to your JavaScript:

document.getElementById("calc-button").addEventListener("click", calculateTotal);

thanks for the answer, I have updated my HTML above to reflect on how I am calling calculateTotal() onclick. is this the correct way of doing it? — user3641959, May 15 '14 at 17:48
Yes, that looks right. If it's still not working, it might be helpful if you copied all your code into a [jsfiddle](http://jsfiddle.net/) to demonstrate the problem. — Kylok, May 15 '14 at 17:58
I updated my answer to include some advice about attaching events and a [jsfiddle example](http://jsfiddle.net/988WT/3/). — Kylok, May 15 '14 at 18:16

.innerhtml is not placing content in "DIV"

1 Answers1