Question

我是Javascript的新手，我已经潜伏了很长时间，试图找出它无济于事。我需要的是让一个HTML文本输入更改多个HTML正文区域（我可能没有解释正确）。我可以通过使用单个ID来使其工作得很好，但是当我尝试使用Classes时，我无法获得多个工作。

我的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;
    }
}

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

1 个答案: