Multiple onclick buttons in an HTML page

Question

I'm designing my webpage to use onclick functions to pull in data from other web pages and to display that data using iframe. The code works exactly as intended when I only have one button; however, when I add a second button and subsequent script, both buttons only pull in the data from the second script. How can I set this up so that EITHER button can be selected and return the proper page? Here's the code I'm working with:

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

You can't have 2 functions with the same name. You will need to give it a different name or pass parameters to one function. — Lee Taylor
– Lee Taylor, Commented Oct 28, 2015 at 15:35

cнŝdk · Accepted Answer · 2015-10-28 16:25:42Z

1

Problem:

The problem here is that you are defining two differents function with the same name, so the second declaration of the function is overriding the first one, that's why you always get the second script called actually there's only one function (defined two times).

Solution:

Actually you are mixing-up things here, you can't have two functions with the same name in one page even if they are in differents script blocks.

And it's better to use only one script block where you define you functions and then call them in your page, this what it should look like:

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

EDIT:

I just edited the code to add a boolean flag to test if the iframe is created which is initialized to false, if it's false we will create the iframe otherwise we will just get it from the document and update it's content.

edited Oct 28, 2015 at 16:25

answered Oct 28, 2015 at 15:39

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tony Over a year ago

I never even looked at defining each function individually. I was more worried about getting the code to run properly with iframe. What you're saying makes perfect sense. I made the changes you suggested and they work well, but I keep getting multiple iframes popping up each time the buttons are clicked. Is there a way to add a "reset" of some kind there so each click uses the same iframe?

cнŝdk Over a year ago

@Tony Yes of course, it's very simple we just need to add a boolean flag to test if the iframe is already created or not, take a look at my edit for further information.

Tony Over a year ago

I appreciate your help today! I knew there needed to be an if/else in there somewhere but I obviously didn't set it up right. I tried setting it up to check the functions against each other, not within each function itself. I'm curious though how the var iframeExists works, The element created is IFRAME. I thought the two had to be the same for the var to work.

cнŝdk Over a year ago

var iframeExists is a global variable because it's declared outside the two functions in the global scope so we can use it in the two functions, that's the only mystery :)

Tony Over a year ago

Sounds good to me. Thanks again for all of your help. I learned quite a bit about JS today.

|

Blue · Accepted Answer · 2015-10-28 15:35:50Z

Functions are basically like variables in javascript. If you set the variable myFunction to a function, and then set myFunction to another function, it will overwrite the previous function, which is what is happening here. Simply change the name of the second function, and you're good to go:

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

Joshua Bakker · Accepted Answer · 2015-10-28 15:35:44Z

0

Basically the second function will overwrite the first one: you can only have one function with a specific name; another cannot be named the same.

answered Oct 28, 2015 at 15:35

Joshua Bakker

2,3783 gold badges38 silver badges67 bronze badges

Comments

Hadrien Delphin · Accepted Answer · 2015-10-29 08:09:16Z

juste declare your function once,

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

but with this method, your function will do the same thing for the 2 buttons. you should add a parameter to your function like this :

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

and call your function in the onclick with the correct parameter

Collectives™ on Stack Overflow

Multiple onclick buttons in an HTML page

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related