SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    addEventListener won't work

    The first bit of code below works, the second doesn't. Does anyone know why?


    Code:
    var prev = document.getElementById("prev");
        Core.addEventListener(prev, "click", Build.clickPrev, false);
    Code:
    var big = document.getElementById("big");
        Core.addEventListener(big, "click", Build.clickZoom(zW,zH), false);
    They are extracts from http://eskvalleyenergy.org/build.js

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    As far as I can tell, neither should work because addEventListener only takes three parameters. But in any case, the second one won't work anyway because zW and zH won't get passed on. You would need to do this instead:
    Code:
    Core.addEventListener("click", function() {
      Build.clickZoom(zW,zH)
    }, false);
    But I really don't know what "prev" and "big" are doing there, as only the last three parameters should exist in an addEventListener call. Also, I hope you are aware that IE doesn't support addEventListener.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The core. prefix refers to code that modifies for IE. Because that is there the 'prev ' and ' big' are referred to in the addEventListener parameters(that's why there are four). I know Zh and Zw are not being passed on but your solution does not work.

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The third argument to addEventListener() needs to be a function reference. In the second case you are using a function call. Unless Build.clickZoom(zW,zH) returns a function, it's not going to work.

    You could do something like this:
    Code JavaScript:
    Core.addEventListener(big, "click", function() {Build.clickZoom(zW,zH)}, false);
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's what the first response said. It doesn't work. It might help if I explain that I am trying to convert the following html.

    <a href="javascript:;" onclick="zoom(zW,zH)"><img src="show/toolin.png">

    The working version is athttp://eskvalleyenergy.org/pt.htm

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    How about the non-working version? That would be more useful so it can actually be fixed. Anyway, from what I can see, you don't even need to pass zW and zH to the function anyway since they are constants. So in effect you could use this:
    Code:
    addEventListener("click", Build.clickZoom, false);
    and use zW and zH from within the clickZoom function. There is no reason why the above shouldn't work. Also, I think you are misunderstanding addEventListener. In the code you first provided, "Core" is the element that the event will be attached to (though I suspect Core isn't an element, since "big" is a parameter in the function call). I think that might be why you have four parameters instead of three. Go to the link I posted in my first post and read up on addEventListener.

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Raffles, I assume that Core is Kevin Yank's Core JS library that comes with his book, Simply JavaScript. The library has been released as open source; see Simply JavaScript: The Core Library.
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hope that explains my use of 'core'. I'm still stuck, I'm getting this error

    [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://localhost/core.js :: anonymous :: line 8" data: no]
    http://localhost/core.js
    Line 8

    I assume this refers to the attempt to attach a listener to big.png as all the other buttons work. I've looked it up but can't find any answers relevant to this case.

    I'm not using the working version coz it's a mess of html,css and js. I'm trying to separate them so it will validate.

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The addEventListener() function in Kevin's Core object only takes three arguments. It doesn't have the capture argument, since IE's event handling doesn't support it.

    This should work, provided the zW and zH variables (and the Build object, of course) are defined:
    Code JavaScript:
    Core.addEventListener(big, "click", function() {Build.clickZoom(zW,zH)});
    Birnam wood is come to Dunsinane

  10. #10
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I still get the error mentioned in #8 Today 03.22.
    Please look at my original question. Why does one work and not the other?
    Heres the full code

    Code:
    var Build =
    	{
    	init: function()
    	{
    	
    	oW = 400;
    	oH = 400;
    	zW = 40;
    	zH = 40;
    	effect = 23; 
        duration = 1.5; 
    	delay = 3;
    	
    	slides = new Array();
     
        slides[0] = ["route for ground loops to manifold.png", "Route for ground loops to manifold"];
        slides[1] = ["loops to manifold location.png", "Loops to manifold location"];
        slides[2] = ["manifold.png", "Manifold"];
        slides[3] = ["existing central heating pipework.png", "Existing central heating pipework"];
        slides[4] = ["existing oil boiler.png", "Existing oil boiler"];
        slides[5] = ["ground loop coils.png", "Ground loop coils"];
        slides[6] = ["ground loops2.png", "Ground loops2"];
        slides[7] = ["Heat Echange pump located in garage front off.png", "Heat  pump located in garage front off"];
        slides[8] = ["Heat exchange pump outside.png", "Heat  pump outside"];
        slides[9] = ["heat pump without casing.png", "Heat pump without casing"];
        slides[10] = ["Heat exchange pump in garage.png", "Heat  pump in garage"];
    	
    	S = new Array();
        for(a = 0; a < slides.length; a++){
    	S[a] = new Image(); S[a].src  = slides[a][0];
    	}
    	
    	n=0;
    	
    	
    	currSlide = document.getElementsByName("currSlide");
    	currSlide.value = 0;
    	onchange="Build.selected(this.options[this.selectedIndex].value)"
    
    	
        var start = document.getElementById("play");
        Core.addEventListener(start, "click", Build.clickStart, false);
    	
    	var stop = document.getElementById("stop");
        Core.addEventListener(stop, "click", Build.clickStop, false);
    	
    	
    	
    	
    	var prev = document.getElementById("prev");
        Core.addEventListener(prev, "click", Build.clickPrev, false);
    	
    	var next = document.getElementById("next");
        Core.addEventListener(next, "click", Build.clickNext, false);
    	
    	var select = document.getElementById("select");
    	for(var i=0;i < slides.length;i++)
    	{
    	select.options[i] = new Option(slides[i][1],i);
    	}	
    	
    	var big = document.getElementById("big");
        /*Core.addEventListener(big, "click", Build.clickZoom, false);*/
    	Core.addEventListener(big, "click", function() {Build.clickZoom(zW,zH)}, false);
    	
    	var out = document.getElementById("out");
        out.addEventListener( "click", Build.clickZoom, false);
    	
    	var reset = document.getElementById("reset");
        Core.addEventListener(reset, "click", Build.clickZoom(''), false);
    	},
    	
    	 clickStart: function()
       {
        Build.Timer = setInterval("Build.runSS()", 3000);
    },
    	
    	
        runSS: function()
    	{
    	n++;
    	if(n >= slides.length){
    		n = 0;
    	}
    	document.images["pix"].src = S[n].src;
    	/*if(document.all && navigator.userAgent.indexOf("Opera") < 0 && navigator.userAgent.indexOf("Windows") >= 0){
    		document.images["pix"].style.visibility = "hidden";
    		document.images["pix"].filters.item(0).apply();
    		document.images["pix"].filters.item(0).transition = effect;
    		document.images["pix"].style.visibility = "visible";
    		document.images["pix"].filters(0).play(duration);
    	}*/
    	currSlide.value = n;
    	select[n].selected = true;
    },
     
       
      
      
       clickStop: function()
       {
        clearInterval(Build.Timer); 
    },
       
       
       clickNext: function()
       {
    	Build.clickStop();
    	n = currSlide.value;
    	
    	n++;
    	if(n >= slides.length){
    		n = 0;
    	}
    	if(n < 0){
    		n = slides.length - 1;
    	}
    	document.images["pix"].src = S[n].src;
    	currSlide.value = n;
    	select[n].selected = true;
    	/*if(document.all && navigator.userAgent.indexOf("Opera") < 0 && navigator.userAgent.indexOf("Windows") >= 0){
    		document.images["pix"].style.visibility = "hidden";
    		document.images["pix"].filters.item(0).apply();
    		document.images["pix"].filters.item(0).transition = effect;
    		document.images["pix"].style.visibility = "visible";
    		document.images["pix"].filters(0).play(duration);
    	}*/
    },
       clickPrev: function ()
       {
    	Build.clickStop();
    	n = currSlide.value;
    	n--;
    	if(n >= slides.length){
    		n = 0;
    	}
    	if(n < 0){
    		n = slides.length - 1;
    	}
    	document.images["pix"].src = S[n].src;
    	currSlide.value = n;
    	select[n].selected = true;
    	
    	/*f(document.all && navigator.userAgent.indexOf("Opera") < 0 && navigator.userAgent.indexOf("Windows") >= 0){
    		document.images["pix"].style.visibility = "hidden";
    		document.images["pix"].filters.item(0).apply();
    		document.images["pix"].filters.item(0).transition = effect;
    		document.images["pix"].style.visibility = "visible";
    		document.images["pix"].filters(0).play(duration);
    	}*/
    }, 
    
    
        selected: function(n)
        {
    	
    	document.images["pix"].src = S[n].src;
    	currSlide.value = n;
    	
    	/*if(document.all && navigator.userAgent.indexOf("Opera") < 0 && navigator.userAgent.indexOf("Windows") >= 0){
    		document.images["pix"].style.visibility = "hidden";
    		document.images["pix"].filters.item(0).apply();
    		document.images["pix"].filters.item(0).transition = effect;
    		document.images["pix"].style.visibility = "visible";
    		document.images["pix"].filters(0).play(duration);
    	}*/
    },
    
        clickZoom: function(dim1,dim2)
        {
    	if(dim1){
    		if(document.images["pix"].width < oW){
    			document.images["pix"].width   = oW;
    			document.images["pix"].height  = oH;
    		} else {
    			document.images["pix"].width  += dim1;
    			document.images["pix"].height += dim2;
    		}
    		if(dim1 < 0){
    			if(document.images["pix"].width < oW){
    				document.images["pix"].width   = oW;
    				document.images["pix"].height  = oH;
    			}
    		}
    	} else {
    		document.images["pix"].width   = oW;
    		document.images["pix"].height  = oH;
    	}
    }
      
    	
    	
    	};
    Core.start(Build)

  11. #11
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    Core.addEventListener(big, "click", function() {Build.clickZoom(Build.zW,Build.zH)});
    The variables zW and zH aren't global, they are defined as properties of the Build object. Thus you must refer to them as such.
    Birnam wood is come to Dunsinane

  12. #12
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Raffles, I assume that Core is Kevin Yank's Core JS library that comes with his book, Simply JavaScript. The library has been released as open source; see Simply javascript: The Core Library.
    Ah, I see. That's quite a nice library for a beginner to learn with. I find it odd, though, that Kevin Yank chose addEventListener as the name of the function instead of addEvent or something else like that. It's confusing this way and could lead to confusion when the beginner then goes on to use the real addEventListener.

  13. #13
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tried this
    Code:
    Core.addEventListener(big, "click", function() {Build.clickZoom(Build.zW,Build.zH)});
    but it doesn't work. Still get this error from firebug

    [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://localhost/core.js :: anonymous :: line 8" data: no]
    http://localhost/core.js
    Line 8

  14. #14
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Leave it at the end of your code it will works. Or do this

    Code JavaScript:
    function init(){
    Core.addEventListener(document.getElementById('big'),'click',function(){alert('test')});
    }
    Core.addEventListener(window,'load',init);

  15. #15
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put it at the end , doesn't work just disables other buttons. Tried putting the alert in, put it before all the other addEventListeners. Doesn't work????????????

  16. #16
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you sure that there is an element with id="big" in the DOM tree when the JavaScript is executed? (Remember that IDs are case sensitive.)

    Try adding a few alerts to make sure:
    Code JavaScript:
    var big = document.getElementById("big"); // Existing line
    alert(typeof big); // Should display "object"
    // The following should display "Type=1" and "Name=X" where X is the tag name
    if (big) alert("Type=" + big.nodeType + "\nName=" + big.nodeName);
    Birnam wood is come to Dunsinane

  17. #17
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK I put the init function with the other functions and the listener in the initial init function and the test alert works. Substituted {Build.clickZoom(Build.zW,Build.zH)} for {alert('test')} and it appears the variables are being passed but it disables all the other buttons and it appears to feed into clickZoom at line 195 "document.images["pix"].width = Build.oW;" so has no effect, maybe a problem with clickZoom. How can I make everything work together?

  18. #18
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rename big, because big() is javascript string function

    String Object
    • properties - constructor, length, prototype
    • display methods - anchor(), big(), blink(), bold(), fixed(), fontcolor(), fontsize(), italics(), small(), strike(), sub(), sup()
    • manipulation methods - charAt(), charCodeAt(), concat(), fromCharCode(), indexOf(), lastIndexOf(), link(), match(), replace(), search(), slice(), split(), substr(), substring(), toLowerCase(), toUpperCase(), toString(), valueOf()

  19. #19
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It shouldn't be a problem though, because it's not a reserved word.

  20. #20
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is true about reserved words, I was just lazy to check that whole strange code. Anyway there is a lot mistakes in that, if I understand what it should do, then it works for me well, after a lot of changes. It is here http://concer.to/coretest/

  21. #21
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Mirek. You were right, that's exactly what I wanted. Will study with care

  22. #22
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Damn still not out of the woods. The zoom function doesn't work if a style sheet is applied????????

  23. #23
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Last edited by Mirek Komárek; Nov 7, 2007 at 04:37. Reason: spelling

  24. #24
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The slide show is only part of a page to which css is applied. A working but messy version can be found at http://eskvalleyenergy.org/hydro2.htm


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •