Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by abhisheksharma
abhisheksharma
6,136 Points

Swapping paragraphs in JavaScript

Hello,

I'm stuck with swapping paragraphs in JavaScript. What I need to do is swap the paragraph with id="p1" with the second paragraph which has id="p2"

So lets say p1 had "The sky is blue", and p2 contained "Apples are red". When I click on any of the text in either paragraph, the JavaScript function should be called which swaps the text in both. so p1 would contain "Apples are red" and p2 should contain "The sky is blue" once it is clicked.

Here's what I have so far and I'm not too sure why it isn't working:

function swap() {
      var x = document.getElementById("p1")
      var y = document.getElementById("p2")
      document.getElementById("p1").value = y
      document.getElementById("p2").value = x
}

If I could get any help on this, that would be great. Also, could it be that I'm calling the function poorly in my HTML code? I'm currently trying to go by 

<p onClick="swap()">

Thanks in advance!

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Abhishek,

To get or set the text of the paragraph you would want to use innerText, textContent, or innerHTML

.value is for input elements as far as I know.

In general, to swap 2 values you need a temporary variable unless the language allows for swapping without a temporary variable.

What I think you were trying to do there was get the p2 text and put it in p1 but once you've done that then you've lost the original p1 text.

So you need to first save the p1 text in a temp variable, then you can put the p2 text into p1, and finally put the p1 text that was saved in the temp var and put that into p2.

I would also recommend that you save your 2 p elements in global variables so that you're not repeatedly retrieving them with getElementById

Here's some javascript code showing all of this:

var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");

p1.addEventListener("click", swap);
p2.addEventListener("click", swap);

function swap() {
  // save p1 text in temp var
  var p1Text = p1.textContent;

  // Get p2 text and overwrite the p1 text
  p1.textContent = p2.textContent;

  // Take the p1 text that was saved and put it in p2
  p2.textContent = p1Text;
}

I used addEventListener here but onClick in the html will also work. However, I think it's best to keep the javascript separate from the html.

Let me know if you have any questions about it.

Sidney François
Sidney François
2,092 Points

Well, that's much more sexy than my solution.

abhisheksharma
abhisheksharma
6,136 Points

Hi Jason,

Thank you! I completely understand what you wrote, but being new to JavaScript I had a minor question. To access the actual text itself, I always need to use .textContent? I feel like that is what I was missing beforehand.

Other than that, I was certainly able to work with what you said, and I was able to finish what needed to be completed. Thanks again!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome.

innerText and textContent are very similar in what they do. Both will allow you to retrieve or set the text of an element. innerText is not part of the standard though and is undefined in firefox. textContent is part of the standard but isn't supported in ie8 or below I think. So if you need to support those older browsers then you'll need a fallback.

innerHTML could be used but it's more useful when you need to retrieve or set html within an element.

The value property which you tried to use is undefined for a p element. A p element doesn't have a value.

An <input> element is where you would want to use the value property.

Sidney François
Sidney François
2,092 Points
Sidney François
Sidney François
2,092 Points

Your code is way too simple.

  1. When declaring your variables, you're telling JS what `ID? to look for, but not the content.
  2. You actually need to define a function that tells JavaScript what to do in case of onclick.

So I wrote a quick and dirty script. Not too beautiful but it gets the job done.

window.onload = function () {

    var x = document.getElementById('p1').innerHTML;
    var y = document.getElementById('p2').innerHTML;
    var swapped = false;

    document.getElementById('trigger').onclick = function swap() {

        if (swapped == false) {
            document.getElementById('p1').innerHTML = "" + y;
            document.getElementById('p2').innerHTML = "" + x;
            swapped = true;
            return swapped;
        } else {
            document.getElementById('p1').innerHTML = "" + x;
            document.getElementById('p2').innerHTML = "" + y;
            swapped = false;
            return swapped;
        }
    }
}

<p id="p1">Paragraph 1</p>
<p id="p2">Paragraph 2</p>

<button id="trigger" onlick="swap()">Click</button>

JSFiddle Demo with comments!

Sidenote: Wasn't sure whether you needed to only "swap" or actually "toggle" the content. So I included a "false/true" mechanism that would allow toggle. But that could be easily removed.