How do I use JavaScript to display one value in multiple places marked by elements with the same class?

Question

I am trying to show the same text value in designated elements marked by the same class. Basically, this text is a value that I am getting from a form input tag. I am trying to do this with JavaScript using a getElementById to gather the text value and then getElementsByClassName to replace the text value in specified places of a page. Please see the following code first in HTML:

    collective noun: <input type="text" id="noun1" onkeypress="runGather()"><br>
    something the <i class="collective_noun">collective noun</i> can make: <input type="text" id="noun2"><br>
    adj describing <i class="collective_noun">collective noun</i>: <input type="text" id="adj"><br>

and then in the JS file:

function runGather() {
    var noun1 = document.getElementById("noun1").value;
    var collective_noun = document.getElementsByClassName("collective_noun").value;
    for (var i = 0; i < noun1.length; i++) {
        collective_noun[i].innerHTML = noun1;
    }
}

Is this not working, you've told us what you've done but not what's wrong — iConnor, Feb 16 '14 at 07:50
thanks I chose the solution by lalaland...as for this question as a possible duplicate, I can see why it would seem so but looking at the duplicate didn't help me much. — Niessie, Feb 16 '14 at 08:33

score 0 · Answer 1 · answered Feb 16 '14 at 07:30

0

You're setting collective_noun to just a value when you want to use the nodelist that's returned, and you're trying to loop through noun1, which is just the value of the node. Try this instead:

var i, l,
    noun_1,
    collective_nouns;

noun_1 = document.getElementById('noun_1').value;
collective_nouns = document.getElementsByClassName('collective_noun');
for (i = 0, l = collective_nouns.length; i < l; i += 1) {
    collective_nouns[i].innerHtml = noun1;
}

answered Feb 16 '14 at 07:30

kinakuta

9,029
1
39
48

Hi kinakuta, when you stated var what does l do? Trying to understand this so I can use it for next time. – Niessie Feb 16 '14 at 08:09
l is just the variable to assign the nodelist length to in the for loop - nodelist length values are dynamically updated, so rather than have it calculate the nodelist length each time through the loop (which could change if another node was added to the list during the course of the loop) I just assign the length to l at the start of the loop. – kinakuta Feb 16 '14 at 08:16
Awesome--this code also solves my issue! I am going with the first suggestion though because I only needed to drop a value call. Thanks so much. Will definitely keep this solution's lesson in mind for next time :) – Niessie Feb 16 '14 at 08:29

score -3 · Answer 2 · edited Feb 16 '14 at 07:56

-3

Instead of using plain JavaScript, you could save yourself the headache and use jQuery. Here's a one-line example using jQuery:

$(".collective_noun").text( $("#noun1").val() );

edited Feb 16 '14 at 07:56

Qantas 94 Heavy

15,750
31
68
83

answered Feb 16 '14 at 07:48

Jonathon Hibbard

1,547
13
20

1

thanks, but I'm trying to learn JavaScript. I will definitely look into JQuery after I feel some level of comfort with JS – Niessie Feb 16 '14 at 08:05
Np dude! If you're learning, here is a great resource for a *ton* of helpful info/resources/etc. http://www.jstherightway.org – Jonathon Hibbard Feb 16 '14 at 08:35

How do I use JavaScript to display one value in multiple places marked by elements with the same class?

2 Answers2