How Do I Add Something To My Html Using Javascript Without Erasing The Whole Page

I have a small calculator that I'm adding to my html. It has a few dropdowns to select stuff and when a person hits a submit button, I'd like to display a picture below the calcula

Solution 1:

You need a placeholder element for your output. Then set the innerHTML for that element:

<div id='answer'></div>

then:

document.getElementById('answer').innerHTML = "answer is:" + yourdata

Solution 2:

Don't use document.write, period. Use DOM operations: http://www.quirksmode.org/dom/intro.html

Solution 3:

Instead of document.write() you can set the innerHTML property of any DOM node to add text to the page.

Say you add a <div id='result'></div> to the end of the page (before the body tag). Then in your javascript have:

var result_display = document.getElementById('result');
// and in calc_rate():
result_display.innerHTML = "answer";

Note that this will always reset the result_display's text. You can also wrap that operation in a function:

functiondisplayResult(result){
    result_display.innerHTML = '<h2>' + result + '</h2>'; // or whatever formatting
}