Jump to content

refusal to open new window!


Recommended Posts

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

I see a number of issues with imageFunc

  1. it's getElementsByTagName - https://developer.mozilla.org/en-US/docs/Web/API/Element.getElementsByTagName
  2. it returns an array, not just a single element
  3. 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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...