javascript - HTML 页面中的多个 onclick 按钮

Question

我正在设计我的网页以使用 onclick 函数从其他网页中提取数据并使用 iframe 显示该数据。当我只有一个按钮时，代码完全按预期工作；但是，当我添加第二个按钮和后续脚本时，两个按钮都只从第二个脚本中提取数据。我如何设置它以便可以选择 EITHER 按钮并返回正确的页面？这是我正在使用的代码:

<div class="section">

    <button onclick="myFunction()">Illustrators</button>
    <script>
    function myFunction() 
    {
        var x = document.createElement("IFRAME");
        x.setAttribute("src", "http://www.oldgamer60.com/Project/Illustrators.php");
        document.body.appendChild(x);
    }
    </script>

    <button onclick="myFunction()">Tech Writers</button>
    <script>
        function myFunction() 
        {
            var x = document.createElement("IFRAME");
            x.setAttribute("src", "http://www.oldgamer60.com/Project/TechWriters.php");
            document.body.appendChild(x);
        }
</script>
</div>

Answer 1

问题:

这里的问题是你定义了两个同名的不同函数，所以函数的第二个声明覆盖了第一个，这就是为什么你总是得到第二个脚本调用实际上只有一个函数(定义两次).

解决方案:

实际上你在这里混淆了东西，你不能在一个页面中有两个同名的函数，即使它们在不同的脚本 block 中也是如此。

最好只使用一个脚本 block 来定义函数，然后在页面中调用它们，这应该是这样的:

<script>
  var iframeExists = false;

  function myFunction1() {
    var x
    if (!iframeExists) {
      x = document.createElement("IFRAME");
      iframeExists = true;
    } else {
      x = document.getElementsByTagName("IFRAME")[0];
    }
    x.setAttribute("src", "http://www.oldgamer60.com/Project/Illustrators.php");
    document.body.appendChild(x);
  }

  function myFunction2() {
    var x;
    if (!iframeExists) {
      x = document.createElement("IFRAME");
      iframeExists = true;
    } else {
      x = document.getElementsByTagName("IFRAME")[0];
    }
    x.setAttribute("src", "http://www.oldgamer60.com/Project/TechWriters.php");
    document.body.appendChild(x);
  }
</script>

<div class="section">

  <button onclick="myFunction1()">Illustrators</button>

  <button onclick="myFunction2()">Tech Writers</button>

</div>

编辑:

我刚刚编辑了代码以添加一个 bool 标志来测试是否创建了 iframe，它被初始化为 false，如果它是 false，我们将创建 iframe，否则我们将从文档中获取它并更新它的内容。