Question

<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>12px</option>
        <option>18px</option>
        <option>24px</option>
    </select></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Send" onclick="Start()" /><input type="reset" value="Clear" /></td>
</tr>

So, I want to take the textbox text, copy it into a var like this var text = document.GetElementByID("pageh").value; and then execute it to a document.write with the selected colors and sizes from the lists.

Answer 1

Something like this?

function Start() { 
    var text = document.getElementById('pageh').value; // get the value of the textbox
    var color_el = document.getElementById('hcolor');
    var color = color_el.options[color_el.selectedIndex].innerText.toLowerCase(); // get the selected color
    var size_el = document.getElementById('hsize');
    var size = size_el.options[size_el.selectedIndex].innerText; // get the font-size
    // make a p element with the selected style properties
    document.write("<p style='color: "+ color +"; font-size: " + size + "'>" + text + "</p>"); 
}

the size_el.options and color_el.options are element lists of the options in the select tags,
The size_el.selectedIndex and size_el.selectedIndex are the selected options, represented by integers. so color_el.options[2] would give us the third option element. Then we “extract” the innerText from the elements.

Last we create an paragraph element, which looks something like <p style="color: gray; font-size: 24px">test</p> the color should preferable be written with lowecase letter, therefore we transform the “Gray” to “gray” by using “Gray”.toLowerCase()