How do I add something to my html using javascript without erasing the whole page
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:
function displayResult(result){
result_display.innerHTML = '<h2>' + result + '</h2>'; // or whatever formatting
}