CODEWITHSUNDEEP
javascripthtmluser-input
user3204918
user3204918

Reputation: 23

JS + User input: One text input changes multiple ids/classes in the body

I'm completely new with Javascript and I've been lurking around for a long while trying to figure it out with no avail. What I need is to have a single HTML text input change multiple HTML body text areas (I'm probably not explaining that right). I can get it to work just fine by using a single ID, but I just can't get multiple one's to work when i try Classes.

My Javascript is:

<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>

and my HTML is:

<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>

So when i put something in that user input and click apply, i need the FIRST SECOND THIRD to all change to the inputted text, but it's not working :(

(fyi, im not attempting to change the CSS in real-time, i'm just making a template that can be easily modified for teaching)

Upvotes: 2

Views: 280

Answers (1)

itsmejodie
itsmejodie

Reputation: 4228

Loop through each element:

function runColours(){
    var userInput = document.getElementById('userInput1').value;
    var elems = document.getElementsByClassName('firstColour');

    for (i = 0; i < elems.length; i++) {
        elems[i].innerHTML = userInput;
    }
}

Upvotes: 1

Related Questions