Get element by id not working

Question

I am trying to get my google maps to display for several locations but the onclick as shown below is not getting to my function b. What am i doing wrong? thanks

Javascript

function b(){
dlat=40.856771;
dlng=0.578294;
alert(dlat);
getLoc();
 }

function init() { 
document.getElementById("click").onclick = b;
 }

 window.onload = init

HTML

    <ul data-role="listview" data-split-icon="star" data-split-theme="a">
            <li><a href="#1"><h1>task1</h1></a><a href="#popup" id="click" data-rel="popup" data-position-to="window" data-transition="fade"> </a></li>
        </ul>


        <div data-role="popup" id="popup" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15">
            <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete">Close</a>

            <iframe src="map.html" width="320" height="320" seamless></iframe>
        </div>

works for me as well. Perhaps there is another error on the page preventing this from executing correctly — mrpotocnik, May 29 '14 at 18:18
I'm guessing that the window is *already loaded* before your initialization code runs... — Cameron, May 29 '14 at 18:20
@Cameron has a point. changing my fiddle to onLoad prevents it from running http://jsfiddle.net/mrpotocnik/AjcpL/ — mrpotocnik, May 29 '14 at 18:23
The code doesn't work for me on jsfiddle. If I change it to `= init()` then it works. Window is different for different browsers but this doesn't make sense. — Joseph Dailey, May 29 '14 at 18:24
@Joseph: That's because when the code runs, it calls `init()` which returns `undefined` which is then assigned (harmlessly in this case) to `window.onload`, not because the syntax is correct. — Cameron, May 29 '14 at 18:39
my nav bar is in a list view
could this be causing problems? — user3674474, May 29 '14 at 18:48
You have no text in your link Is that by design? how are you getting a click in the first place? — mrpotocnik, May 29 '14 at 19:41

score 0 · Answer 1 · edited May 23 '17 at 10:26

0

Without seeing your entire situation, event delegation could solve your problem. Based on the minimal info I have, I got your function call working using event delegation: http://jsfiddle.net/uufS3/1/

document.getElementById("container").addEventListener("click", b, false);


function b(){
    dlat=40.856771;
    dlng=0.578294;
    alert(dlat);
    getLoc();
}

Of course, this means you'd need to have some sort of pre-existing element on the page. I added a container div, but it could be (and probably should be) the body tag itself.

If this is a large app, this solution could help with memory leaks as well.

If your app/site needs to support older IE versions, look at something like this in addition to addEventListener.

Is it imperative that you have the init function? Does it do more than what you have listed? If not, I'd recommend ditching it since it isn't necessary in solving this specific problem. It seems like window.onload is unnecessary in your situation unless (like I said) that function does other things not listed.

UPDATE Here is more info on how to use logic in event delegation... assuming you do end up attaching it to the body tag, you'll need to filter the clicks.

edited May 23 '17 at 10:26

Community

1
1

answered May 29 '14 at 18:37

Nick Johnson

190
1
12

Uncaught TypeError: Cannot call method 'addEventListener' of null – user3674474 May 29 '14 at 18:52
Are you getting this error on the jsfiddle I posted? All I am seeing is that getLoc isn't defined (which it isn't). – Nick Johnson May 29 '14 at 18:57
I am getting this error in my code, it still isn't getting the "click" id even with the event listener – user3674474 May 29 '14 at 19:00
Did you attach the event to a non-dynamic element like the body tag? Make sure your selector is unique or you'll need to specify an array index... the easiest way is probably to just give your body tag an ID attr. – Nick Johnson May 29 '14 at 19:03
I have set an attr to the body tag called "container" and the rest is the same, yet I still get this message – user3674474 May 29 '14 at 19:07
Without seeing your full source, there's no way for me to troubleshoot. – Nick Johnson May 29 '14 at 19:12

Get element by id not working

1 Answers1