用 Javascript 交换 <p>答案

【问题标题】：Swapping <p> with Javascript用 Javascript 交换 <p>
【发布时间】：2016-10-10 18:26:14
【问题描述】：

我正在尝试用一个 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;    
}

我得到错误：

未捕获的引用错误：swapT 未定义

怎么了？

【问题讨论】：

什么是innherHTML？
还有innterHTML!
“似乎要签出”打开控制台，您会发现“似乎”并不是确保代码良好的好方法。
@showdev Uncaught ReferenceError: swapT is not defined
它正在工作：jsfiddle.net/matikucharski/wywujded。您需要先定义函数，然后再将其添加到 html onclick

标签： javascript html swap

【解决方案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>

【讨论】：

这更有意义。非常感谢！