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>

因此，我想获取文本框文本，将其复制到类似var text = document.GetElementByID("pageh").value;的var中，然后使用列表中选定的颜色和大小将其执行到document.write。

Answer 1

这样的东西？

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>"); 
}

size_el.options和color_el.options是select标记中选项的元素列表， size_el.selectedIndex和size_el.selectedIndex是选定的选项，由整数表示。所以color_el.options[2]会给我们第三个选项元素。然后我们从元素中“提取”innerText。

最后我们创建了一个段落元素，看起来像<p style="color: gray; font-size: 24px">test</p>，颜色最好用lowecase字母书写，因此我们使用“Gray”.toLowerCase（）将“Gray”转换为“gray”。 / p>

javascript文本框文本接收发布和更改颜色

1 个答案: