bloodaxe Posted January 27, 2014 Share Posted January 27, 2014 I have created a web page with a table. in each cell is an <img> inside an <a>. The init function writes the image tags in with the corect src values for each pic. It also writes the href values for the a tags. The idea is that when the pic is clicked it opens in a new window bigger using imageFunc to take the url which is the existing href, and show it in a new window. . I have a previous effort that does this fine but was done longhand by writing all the href's and src's in then adding 20 onclick events. This is my attempt to condense the whole thing into Js functions. Problem is this opens the image full screen in the existing tab. Which is ok but not what is supposed to happen. i have tried various settings for the parameters to no avail. I cant upload the .js so I have copied it in below; sorry. Any ideas will be appreciated. function init(){ for(i=1;i<21;i++) { x=document.getElementById("pic"+i); x.innerHTML="<img src='Weymouth by steam 2012 0"+i+".jpg' />"; document.getElementById("pic"+i).setAttribute("href","Weymouth by steam 2012 0"+i+".jpg");}}document.addEventListener("DOMContentLoaded", init, false); function imageFunc(){ a = document.getElementByTagName("a").getAttribute("href"); window.open(a.href, "_blank",'left=20,top=20,width=500,height=500,toolbar=0,resizable=1, scrollbars=yes');return false; } index.html weymouth2.css Link to comment Share on other sites More sharing options...
Ingolme Posted January 28, 2014 Share Posted January 28, 2014 The <table> element doesn't have an onload attribute. Only <body> and <img> have it. The main problem is that, since you're using an attribute for the event, return false has to be in the attribute itself. onclick="imageFunc(); return false" Or onclick="return imageFunc();" Link to comment Share on other sites More sharing options...
bloodaxe Posted January 29, 2014 Author Share Posted January 29, 2014 Hi, thanks for that. I have tried it all and nothing changes. It doesn't matter where I put the onload event it still loads. And no matter what I do to the imageFunc() it still opens the pic in the original window. The problem seems to be with line 16. This is the error thrown in the debugger. TypeError: 'undefined' is not a function (evaluating 'document.getElementByTagName("a")') (18:47:43:100 | error, javascript) at public_html/weymouth2.js:16 Does this help? I am not too sure about debugging and seem unable to identify what variables hold what values at any given point. Clearly the function is doing something, but is what it does some default action taken by th ebrowser when it doesn't'understand' something/ Link to comment Share on other sites More sharing options...
thescientist Posted January 29, 2014 Share Posted January 29, 2014 I see a number of issues with imageFunc it's getElementsByTagName - https://developer.mozilla.org/en-US/docs/Web/API/Element.getElementsByTagName it returns an array, not just a single element you were trying to get the href attribute, then trying to access the href attribute off of the variable a I would remove all the inline imageFunc calls on each element, and instead add an event handler to all the a tags, and get the href of the element triggering the event instead. Then you don't have to duplicate all those inline function calls https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener Link to comment Share on other sites More sharing options...
Ingolme Posted January 29, 2014 Share Posted January 29, 2014 Yes, that's also a big problem. I hadn't looked carefully at the contents of imageFunc(). First of all, the function is getElementsByTagName. It returns a list, so you have to go through each element of the list. Since what you're trying to do is target the element that was clicked you're going to have to pass the element to the function: onclick="return imageFunc(this);" Inside the function, refer to the element in the function's argument: function imageFunc(a){ window.open(a.href, "_blank", 'left=20,top=20,width=500,height=500,toolbar=0,resizable=1, scrollbars=yes'); return false;} Link to comment Share on other sites More sharing options...
bloodaxe Posted February 3, 2014 Author Share Posted February 3, 2014 Hi, Thanks for the help. Foxy Mod's suggestion works fine. TheScientist's idea has got me stumped so far, but I will persevere with addEventListener and try to figure it out. This is all a learning process for me so it is all good! I have discovered that my listener for init also doesn't do anything as without it the images etc load fine! ah well as I say it is a learning curve. Regards B. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now