将 <p> 与 Javascript 交换

Question

我正在尝试用 JavaScript 按钮交换两个 HTML 段落。代码似乎都检查出来了，所以我似乎无法弄清楚为什么它不起作用！

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;    
}

我收到错误：

Uncaught ReferenceError: swapT is not defined

怎么了？

Answer 1

从您收到的错误消息来看，您的 swapT() 函数似乎在定义之前已绑定到内联处理程序。如果您要从内联处理程序调用该函数，请首先在文档的 <head> 中定义该函数：

<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>

我的建议是在定义函数时绑定监听器，而不是：

<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>

这里有一些相关链接供进一步参考：

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?

将 <p> 与 Javascript 交换

Swapping <p> with Javascript

html

javascript

swap