[RESOLVED] Check if element exists

I'm currently creating an element on a page dynamically to show image. I want to prevent more than one image being created at a time - so i figured I'd check for it's presence. A little scan of MSDN has given me getElementByName - but I don't know what methods / properties the returned collections has. I had a stab at .count (but no joy):

Code:

---

  var iexists = document.getElementsByName('popupimg')
  alert(iexists.count)

  var i = document.createElement('img');
  i.name = 'popupimg'

---

If someone could advise me on the best way of doing this and/or point me in the way of the relevent documentation, that would be great.

Ok, I've worked out you can do:

Code:

---

alert(iexists.length)

---

Works in Fx, but not in IE! Presumably getElementsByName isn't returning anything :confused:

Code:

---

i.setAttribute('id', 'popupimg');

...

var iexists = document.getElementById('popupimg');
if (iexists) alert('It is there');

---

Since there is only one, there is no need to get a collection of elements. Name is deprecated, you should use ID.

woo, thanks for the quick reply Merri - works great :thumb:

Edit: I have to spread it around a bit I'm afraid.

The problem is that IE doesn't implement getElementsByName. And be warned: it incorrectly implements getElementById, as it will also return elements with their name attribute set to the passed value, and will return an array on multiple hits. (The latter wouldn't be incorrect if it didn't have the first bug, as a document with a non-unique ID is not well-formed and all DOM operations thus undefined, but since IE also collects elements by their name attribute, well-formed documents can have an array as the return value of getElementById.)

ok, thanks for the info - shouldn't be a problem here.

I have another question though!

how would i go about removing the iexists object from the page. i have this code for when the image gets clicked:

Code:

---

function doPopupClick(e)
{
  var obj = e.target || e.srcElement;
  obj.parentNode.removeChild(obj);
}

---

but I'm unsure as to how to modify that (if indeed i should be doing it that way). I don't know what e is, is it the object that's been clicked?

Try this.parentNode.removeChild(this);

this can be replaced with the result object of a getElementById.


Edit!
You also might find this article interesting.

woo iexists.parentNode.removeChild(iexists); works - i was trying that as you posted, but it wasn't working because I still had the alert in - why would that stop it functioning?

What was the code you had?

Code:

---

function PopupPic(sPicURL)
{
  var iexists = document.getElementById('popupimg');

  if (iexists)
    //alert('It is there');
    iexists.parentNode.removeChild(iexists);
  else
    var i = document.createElement('img');
    i.setAttribute('id', 'popupimg')
    i.setAttribute('src', sPicURL);
    .
    .

---

I uncomment the alert and it stops working.

cheers for that link, I'll have a look - I'm doing work for my g/f's dad - but i don't know any web languages so I'm learning as i go along :sick:

You need braces around the conditional blocks:

Code:

---

if (iexists) {
    //alert('It is there');
    iexists.parentNode.removeChild(iexists);
} else {
    var i = document.createElement('img');
    i.setAttribute('id', 'popupimg')
    i.setAttribute('src', sPicURL);
}

---

You should have gotten JS errors if the image didn't yet exist.

it wasn't throwing any errors - it just wasn't doing anything.

oh well - with the braces it pops up the alert as well, thanks

If you're using Firefox, you can see the error messages at Tools > JavaScript console.

I also recommend Firebug

hmm, i took out the braces to have a look at the errors. when i first load the page the Javascript Console reports a syntax error on the 'else' - however when i try to pop up the image there aren't any errors generated - is that to be expected?

To view all an objects methods/properties you can use this undocumented behaviour in IE or Moz

Code:

---

var x;
for (x in myObj) {
  console.log(x);
}

---

console.log outputs it to Firebug, replace with something else if you like.

If you have syntax errors in your JS it will throw one error per JS file and not run any code subsequently (edit: in that file)

cheers pen, i'll definitely check out FireBug

Quote:

---

Originally Posted by penagate

To view all an objects methods/properties you can use this undocumented behaviour in IE or Moz

---

That's not undocumented. The for...in syntax is a well-defined part of the ECMAScript specification. However, Moz and IE differ slightly in their interpretation, as IE does not report built-in functions with this iteration, while Moz does.
The console object, on the other hand, is provided by FireBug and not available on any browser except a Gecko with FireBug installed.

bushmobile, syntax errors are reported when the file is initially parsed, so yes, that's when the page is loaded.

Sorry, that's what I meant, the implementation details are unspecific.

Quote:

---

Originally Posted by CornedBee

The problem is that IE doesn't implement getElementsByName

---

I just noticed this, I beg to differ, I am using getElementsByName in a working script for IE/Fx :)

Hmm ... does it work in IE 5.5? I was always under the impression that IE didn't support gEBN, but it might be an arcane memory.

getElementsByTagName is supported since IE5. IE4 didn't support it.

Weird.