JS + 用户输入:一个文本输入更改正文中的多个 ID/类

Question

我对Javascript完全陌生，我已经潜伏了很长时间，试图弄清楚它，但无济于事。我需要的是让单个 HTML 文本输入更改多个 HTML 正文文本区域（我可能没有正确解释）。我可以通过使用单个 ID 让它正常工作，但是当我尝试类时，我无法让多个 ID 工作。

我的Javascript是：

<script type="text/javascript">
function runColours(){
var userInput = document.getElementById('userInput1').value;
document.getElementById('firstColour').innerHTML = userInput;
var userInput = document.getElementById('userInput2').value;
document.getElementById('secondColour').innerHTML = userInput;
}
</script>

我的 HTML 是：

<p>/* Logo Background Colour */<br/>
.btn-social { background-color: #<b id='firstColour'></b> !important; }<br/>
.lt-ie9 .btn-social{ filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#<b id='firstColour'></b>, endColorStr=#<b id='firstColour'></b>) !important } </p>
<p>/* Twitter Logo */<br/>
.btn-twitter:before { color: #<b id='secondColour'></b>; } </p>
<p>/* Facebook Logo */<br/>
.btn-facebook:before { color: #<b id='secondColour'></b>; } </p>
<p>/* Googleplus Logo */<br/>
.btn-googleplus:before { color: #<b id='secondColour'></b>; } </p>
<p>/* Linkdein Logo */<br/>
.btn-linkedin:before { color: #<b id='secondColour'></b>; } </p>
<form>
<table width="400" border="0" cellspacing="0">
<tr>
<td width="200px"><b>Logo Backgrounds</b></td>
<td width="200px"><input type='text' id='userInput1' value='' maxlength="6" /> <br/>
</td>
</tr>
<tr>
<td><b>All Logos</b></td>
<td><input type='text' id='userInput2' value='' maxlength="6" /> <br/></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type='button' onclick='runColours()' value='Apply'/></td>
</tr>
</table>
</form>

因此，当我在该用户输入中放入某些内容并单击应用时，我需要第一个第二个第三个全部更改为输入的文本，但它不起作用:(

（仅供参考，我没有尝试实时更改 CSS，我只是制作了一个可以轻松修改用于教学的模板）

Answer 1

遍历每个元素：

function runColours(){
    var userInput = document.getElementById('userInput1').value;
    var elems = document.getElementsByClassName('firstColour');
    for (i = 0; i < elems.length; i++) {
        elems[i].innerHTML = userInput;
    }
}