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

函数基本上就像javascript中的变量一样。如果将变量myFunction设置为函数，然后将myFunction设置为另一个函数，它将覆盖之前的函数，这就是此处发生的情况。只需更改第二个功能的名称，您就可以了：

<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="myFunction2()">Tech Writers</button>

<script>

function myFunction2() {
var x = document.createElement("IFRAME");
x.setAttribute("src", "http://www.oldgamer60.com/Project/TechWriters.php");
document.body.appendChild(x);
}

</script>
</div>

Answer 2

<强>问题：

这里的问题是你定义了两个具有相同名称的不同函数，所以函数的第二个声明覆盖了第一个，这就是为什么你总是得到第二个脚本，实际上只有一个函数（定义了两次））。

<强>解决方案：

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

最好只使用一个脚本块来定义功能，然后在页面中调用它们，这应该是这样的：

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

修改

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

Answer 3

基本上第二个函数将覆盖第一个函数：你只能有一个具有特定名称的函数;另一个不能命名相同。

Answer 4

juste声明你的功能一次，

    <div class="section">


    <button id="button1" onclick="myFunction()">Illustrators</button>
    <button id="button2" onclick="myFunction()">Tech Writers</button>
</div>
<script>

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

</script>

但是使用这种方法，你的功能将为2个按钮做同样的事情。你应该在你的函数中添加一个参数，如下所示：

       function myFunction(type) {
  var x = document.createElement("IFRAME");

  switch (type) {
    case type: 1
    x.setAttribute("src", "http://www.oldgamer60.com/Project/Illustrators.php");   
    break;
    case type : 2
    x.setAttribute("src", "http://www.oldgamer60.com/Project/TechWriters.php");
    break;
  }
  document.body.appendChild(x);
}

并使用正确的参数

在onclick中调用您的函数

HTML页面中的多个onclick按钮

4 个答案: