javascript - テキストボックスのテキストを取得して使用し、html 選択ボックスで色を変更する

Question

function Start(){
    var headerr = document.getElementById("pageh").value;
    var hcolor = document.getElementById("hcolor").value;
    var hsize = document.getElementById("hsize").value;

    document.body.innerHTML = "";
}

これは、テキスト ボックスと選択ボックスの値を取得するための JS コードです。

<tr>
    <td>page header</td>
    <td>
        <input type="text" id="pageh" /></td>
</tr>
<tr>
    <td>Header color:</td>
    <td>
        <select id="hcolor">
            <option>red</option>
            <option>purple</option>
            <option>gray</option>
        </select></td>
</tr>
<tr>
    <td>Header size</td>
    <td>
        <select id="hsize">
            <option>small</option>
            <option>normal</option>
            <option>big</option>
        </select></td>
</tr>
<tr>
    <td></td>
    <td><input type="button" value="Send" onclick="Start()" /><input type="reset" value="Clear" /></td>
</tr>

そして、テキストボックスと選択ボックスの HTML コード。では、テキストを投稿し、その色とサイズを操作するにはどうすればよいでしょうか? document.write(""headerr""); を使用することを考えました。しかし、うまくいかないようです。

ETA JSFiddle: http://jsfiddle.net/7LNMn/

ありがとうございました！！

Answer 1

function Start(){
    var headerr = document.getElementById("pageh").value;
    var hcolor = document.getElementById("hcolor").value;
    var hsize = document.getElementById("hsize").value;

    var g = document.getElementById("header"); // var g will store document.getElementById("header") so, i don't have to write much whereas header can be changed by the element's id e.g. header of website!
    g.style.background = hcolor; // here g will get the element and style its bg
    g.style.fontSize = hsize; // here its fontSize
    // and I dont know what to do with pageh variable!
}