Danny Garcia Danny Garcia - 1 month ago 11
HTML Question

Swapping <p> with Javascript

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?

Answer

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?

Comments