javascript - JS + 用户输入 : One text input changes multiple ids/classes in the body

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>

因此，当我在该用户输入中输入内容并单击应用时，我需要 FIRST SECOND THIRD 来对输入的文本进行所有更改，但它不起作用 :(

(仅供引用，我并没有尝试实时更改 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;
    }
}