combine html paragraphs using javascript

Question

I'm currently struggling on a very simple javascript task, but I'm new to it, so its confusing me a lot.

e.g. html

<div class="item">
            <div class="title">Item 1 Title</div>
            <div class="description-1">lorum</div>
            <div class="description-2">ipsum</div>
            <div class="description-combined"></div>
        </div>

So I need to combine paragraphs 1 & 2, and replace the empty info in paragraph 3. I don't use jQuery yet, so my research has caused struggle because of this.... i currently have:

var p1 = getElementsByClassName ('description-1').innerHTML;
var p2 = getElementsByClassName ('description-2').innerHTML;
var p3 = p1 + P2
document.getElementsByClassName ('description-combined').innerHTML = p3

I did have p3 to have p1.concat(p2) but that didn't work. I'm using it as an external file, so i may be missing out on putting something in my HTML file too.

hmm, i need it to apply to more than one paragraph... so i've kept it with the class name instead of altering it to ID name. Using it as an array... i'm even more lost lol Thanks though, it can assist in my research now :D — Leah Thompson, Nov 27 '14 at 15:55
My point was that your paragraphs have the class `content` (the first two) and `combine` (the last one) (the first two also have two invalid attributes, `1` and `2`, perhaps you wanted quotes). But your code example shows you looking for completely different classes (`description-1`, `description-2`). — T.J. Crowder, Nov 27 '14 at 15:56
First of all fix your HTML code. `class= content 1` to `class="content-1"`. Wrap the classnames with quotes, and do not use space. — vaso123, Nov 27 '14 at 15:58
Edited it so it all looks as it should as to what I'm working on. — Leah Thompson, Nov 27 '14 at 16:02

score 1 · Accepted Answer · edited May 23 '17 at 12:12

The edit changes the question.

What I'd probably do is loop through the .item elements, combining the descriptions within.

document.getElementsByClassName is a property of document, not a freestanding function, and it returns a list of matching elements. It's also not as widely supported as document.querySelector and document.querySelectorAll, so I'd probably use those; for what we're talking about, we'll also want Element#querySelector.

// Get a list of the items and loop through it
Array.prototype.forEach.call(document.querySelectorAll(".item"), function(item) {
  // Get the two description divs, and the combined, that
  // are *within* this item
  var d1 = item.querySelector(".description-1");
  var d2 = item.querySelector(".description-2");
  var c  = item.querySelector(".description-combined");
  
  // Set the combined text (this assumes we have them all)
  c.innerHTML = d1.innerHTML + d2.innerHTML;
});

.description-combined {
  color: green;
}

<div class="item">
  <div class="title">Item 1 Title</div>
  <div class="description-1">One description 1</div>
  <div class="description-2">One description 2</div>
  <div class="description-combined"></div>
</div>
<div class="item">
  <div class="title">Item 2 Title</div>
  <div class="description-1">2 description 1</div>
  <div class="description-2">2 description 2</div>
  <div class="description-combined"></div>
</div>
<div class="item">
  <div class="title">Item 3 Title</div>
  <div class="description-1">3 description 1</div>
  <div class="description-2">3 description 2</div>
  <div class="description-combined"></div>
</div>

The Array.prototype.forEach.call(list, function() { ... }); thing is a way to loop through anything that's like an array, but isn't an array. It's explained more in this other answer, which also has several alternatives.

wow thanks for this. The more you are all helping me, the more I realise that this is perhaps beyond my expertise as I do not really understand the answer you have provided. This is a 'challenge' that has been set for me and they are allowing me to research answers to test my abilities, but i think this challenge goes beyond what I have learnt so far. — Leah Thompson, Nov 27 '14 at 16:06
@LeahThompson: I've updated the answer to reflect your actual structure, which *did* have the elements in a nice wrapper. It's always best, when posting questions, to post the *actual* code (with irrelevancies stripped out), so the question accurately reflects what you're trying to do. Good luck, — T.J. Crowder, Nov 27 '14 at 16:18
I was being foolish with my panic. Thank you so much for your thorough response. I'd not come across this aspect of JS yet, but i seem to understand what you mean by it being 'like' an array. This is only question 2, i dread to think what question 3 is now, i understood the 1st one so quickly (adding a class to an element with an existing id) — Leah Thompson, Nov 27 '14 at 16:37
@LeahThompson: Yeah, "array-like" is a common JavaScript term but I doubt it's common outside the JavaScript world: It means anything that, like an array, has a `length` property where the entries in it can be accessed using `[0]`, `[1]`, etc. The `NodeList` objects returned by `querySelectorAll` are "array-like," as are many other parts of the DOM (and a few other things as well). Best, — T.J. Crowder, Nov 27 '14 at 16:52
I've just used the code, works perfectly, and I now understand how it works. Looks like there is some further learning for me! — Leah Thompson, Nov 27 '14 at 17:11

combine html paragraphs using javascript

1 Answers1