Swapping
with Javascript

Question

I'm trying to swap two HTML paragraphs with a JavaScript button. The code seems to all check out, so I can't seem to figure out why it's not working!

HTML:

<p id="p1"> Donald Drumpf paced and loomed behind Hillary Clinton at times during Sunday night's second presidential debate -- a decision possibly driven by stress during the intensely bitter event, according to body language expert Janine Driver. </p>
<p id="p2"> "He's decreasing stress by doing all that movement," Driver said of Drumpf's behavior on CNN's "New Day" on Monday. </p>

<button onclick="swapT()"> Swap </button>

JS:

function swapT()
{
  var obj1 = document.getElementById('p1');
  var obj2 = document.getElementById('p2');

  var temp = obj1.innerHTML;
  obj1.innerHTML = obj2.innerHTML;
  obj2.innerHTML = temp;    
}

I get the error:

Uncaught ReferenceError: swapT is not defined

What's going wrong?

"Seems to check out" open the console, and you'll see that "seems" is not a good way to make sure your code is good. — Sterling Archer, Oct 10 '16 at 18:28
@FastSnail Whoops, fixed that, still not getting them to swap though. — Danny Garcia, Oct 10 '16 at 18:31
It is working: https://jsfiddle.net/matikucharski/wywujded/. You need to define function before you add it to html onclick — MatiK, Oct 10 '16 at 18:34
@MatiK Thanks! how do I define the function beforehand? (sorry I'm a newbie) — Danny Garcia, Oct 10 '16 at 18:36

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

From the error message you got, it seems that your swapT() function is bound to an inline handler before it's defined. If you're going to call the function from an inline handler, first define the function within the <head> of your document:

<html>

<head>

  <script>
    function swapT() {
      var obj1 = document.getElementById('p1');
      var obj2 = document.getElementById('p2');

      var temp = obj1.innerHTML;
      obj1.innerHTML = obj2.innerHTML;
      obj2.innerHTML = temp;

    }
  </script>

</head>

<body>

  <p id="p1">Donald Drumpf paced and loomed behind Hillary Clinton at times during Sunday night's second presidential debate -- a decision possibly driven by stress during the intensely bitter event, according to body language expert Janine Driver.</p>
  <p id="p2">"He's decreasing stress by doing all that movement," Driver said of Drumpf's behavior on CNN's "New Day" on Monday.</p>

  <button onclick="swapT()">Swap</button>

</body>

</html>

My suggestion is to bind the listener when you define your function, instead:

<html>

<body>

  <p id="p1">Donald Drumpf paced and loomed behind Hillary Clinton at times during Sunday night's second presidential debate -- a decision possibly driven by stress during the intensely bitter event, according to body language expert Janine Driver.</p>
  <p id="p2">"He's decreasing stress by doing all that movement," Driver said of Drumpf's behavior on CNN's "New Day" on Monday.</p>

  <button id="swap">Swap</button>

  <script>
    
    function swapT() {
      var obj1 = document.getElementById('p1');
      var obj2 = document.getElementById('p2');

      var temp = obj1.innerHTML;
      obj1.innerHTML = obj2.innerHTML;
      obj2.innerHTML = temp;
    }

    document.getElementById('swap').addEventListener('click', swapT);
    
  </script>

</body>

</html>

Here are some relevant links for further reference:

Why put JavaScript in the footer of a page?
Where to place Javascript in a HTML file?
Should I write script in the body or the head of the html?
Does javascript have to be in the head tags?

This makes so much more sense. Thanks a ton! – Danny Garcia Oct 10 '16 at 18:43 — Danny Garcia, Oct 10 '16 at 18:43

Swapping with Javascript

1 Answers1

Swapping
with Javascript