HTML 页面中的多个 onclick 按钮

Question

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

<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

基本上第二个函数会覆盖第一个函数：您只能有一个具有特定名称的函数；另一个不能重名。

Answer 2

函数基本上就像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 3

只需声明一次你的函数，

    <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 中调用您的函数

Answer 4

问题：

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

解法：

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

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

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

编辑：

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

HTML 页面中的多个 onclick 按钮

Multiple onclick buttons in an HTML page

javascript

function

onclick