CODEWITHSUNDEEP
javascript
rex
rex

Reputation: 1025

Get element by id in JavaScript

I have a list of videos and a video player (div container). Need to show a video in the div container when a link is clicked. The video codes is given by a third party so I want to created a conditional statement to check what is clicked based on it's id, but is not working at all! I am pretty sure it is some syntax missing:

<script type="text/javascript">
function showVideo()
{   
 
 if(document.getElementById == videoA)
{   
    alert("videoA")
}

 if(document.getElementById == videoB)
{   
    alert("videoB")
}
}
</script>

--------------------
<a href="#" id="vidoeA" onClick="showVideo()">Video A</a>
<a href="#" id="vidoeB" onClick="showVideo()">Video B</a>

Upvotes: 0

Views: 3821

Answers (5)

Richard Marskell - Drackir
Richard Marskell - Drackir

Reputation: 13302

What you actually want is something like this:

HTML
Note: Your ID's were spelled incorrectly in your question.

<a href="#" id="videoA" onClick="showVideo(this)">Video A</a>
<a href="#" id="videoB" onClick="showVideo(this)">Video B</a>

JavaScript

function showVideo(elem) {
    if(elem.id == "videoA") {
        alert("videoA")
    }
    if(elem.id == "videoB") {
        alert("videoB")
    }
    //or better yet, just:
    //alert(elem.id);
    return false; //Stops you from following the link.
}

Upvotes: 0

Ben
Ben

Reputation: 7597

If that's really the code you're using, it's not working because you have a typo in it: your HTML declares two IDs, one called vidoeA and the other called vidoeB, whereas your Javascript is testing for the correct spelling.

(You also need to put the ID name in quotes in your JS).

Upvotes: 0

Mark Costello
Mark Costello

Reputation: 4394

You need to call the getElementById and pass in the id of the element as a parameter:

if(document.getElementById("videoA"))

The HTML you've included actually have the id misspelled

<a href="#" id="vidoeA" onClick="showVideo()">Video A</a>
<a href="#" id="vidoeB" onClick="showVideo()">Video B</a>

should be 

<a href="#" id="videoA" onClick="showVideo()">Video A</a>
<a href="#" id="videoB" onClick="showVideo()">Video B</a>

The way you've structured your code will show an alert for both elements. If you want the id of the element clicked, you will have to get it from the Event object and do a comparison on that basis.

Upvotes: 2

Pointy
Pointy

Reputation: 413709

You need to pass in the "this" value:

<a href="#" id="vidoeA" onClick="showVideo(this)">Video A</a>

or:

<a href="#" id="vidoeA" onClick="showVideo('videoA')">Video A</a>

Then in the handler:

function showVideo(anchor) { // assumes you used "this", like the 1st example
  var videoId = anchor.id;
  //
  // ... show the video or whatever ...
  //
}

Upvotes: 3

Mike Lewis
Mike Lewis

Reputation: 64147

document.getElementById("videoB")

You want to actually call the getElementById function and pass in the ID as a paramater.

The current way returns:

document.getElementById
>>function getElementById() { [native code] }

So you are actually comparing that function pointer to a variable videoA(which doesn't actually seem to exist in your code).

However judging by your application, I'd actually attach an onclick handler to see which one was clicked.

<a href="#" id="videoA" onClick="videoEvent(this)">Video A</a>

and in your javascript:

function videoEvent(videoLink){
  // videoLink is now the ahref element
}

Upvotes: 0

Related Questions