my second double-click function not working

Question

When clicking on a specific div, I want another div to create a new p style with text in it.

The first function created worked fine- whoever the second one seems to overrule the first one. I've tried changing the names of basically everything but it still seems to overrule. How could I solve this?

  var para = document.createElement("P");
  para.innerHTML = "The Siamese crocodiles share one stomach, yet they fight over food.";
  document.getElementById("information").appendChild(para);
}
    window.onload = function() {
        document.getElementById("i29").ondblclick = function i29i() {
            i29();
        }
    }



function i3() {
  var para = document.createElement("P");
  para.innerHTML = "When you climb a good tree, you are given a push.";
  document.getElementById("information").appendChild(para);
}

    window.onload = function() {
        document.getElementById("i3").ondblclick = function i3i() {
            i3();
        }
    }```

Does your element with id="i3" exists when you trying to add event listener to it? By the way, I would suggests to use more "descriptive" function names... — maximelian1986, May 27 '19 at 09:44
`window.onload` gets overriden, I would put both the event handlers inside one single `window.onload` — Hamza El Aoutar, May 27 '19 at 09:46
This isn't the problem, but just so you know, you don't need to give a function a name if it's an anonymous function, like `ondblclick = function { ... }`. In your code, you don't even need a function - just use the existing function name, without brackets... `document.getElementById("i3").ondblclick = i3;`. — Reinstate Monica Cellio, May 27 '19 at 09:48
Also, please try to start giving functions meaningful names. `i3` does not say anything about what the function is or does. Start naming things to tell you what they are or do, and you'll get into the habit. — Reinstate Monica Cellio, May 27 '19 at 09:49
The function is the name of the div id right now, because there are a lot of different id's with different imagery and symbolism. The entire content of the website is awfully complicated. So the function name is exactly the naming of the files I'm using so I don't get them switched up. — L Leah, May 27 '19 at 14:26
Ah indeed! It get's overridden. Did not even think about that! Thanks. Going to try to put everything in one single window.onload. It should work that way. Also I'll change use the existing function name without brackets. Thanks you! — L Leah, May 27 '19 at 14:32

score 1 · Answer 1 · answered May 27 '19 at 09:50

You coud do it like this:

HTML:

<div onClick="firstClick()">First</div>
<div onClick="secondClick()">Second</div>

<div id="information"></div>

JS:

    function firstClick(){
        var para1 = document.createElement("P");
        para1.innerHTML = "The Siamese crocodiles share one stomach, yet they fight over food.";
        document.getElementById("information").appendChild(para1);
        }
    function secondClick(){
        var para2 = document.createElement("P");
        para2.innerHTML = "When you climb a good tree, you are given a push.";
        document.getElementById("information").appendChild(para2);
    }

score 1 · Accepted Answer · answered May 27 '19 at 09:51

you are resetting the window.onload to another value when you assign it to a different function twice. The simplest solution would be to do the following:

window.onload = function() {
    document.getElementById("i29").ondblclick = i29;
    document.getElementById("i3").ondblclick = i3;
}

my second double-click function not working

2 Answers2