通过id Javascript获取元素

Question

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 is some syntax missing... Thanks in advance

<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>

Answer 1

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 ...
  //
}

Answer 2

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.

Answer 3

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
}

Answer 4

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).

Answer 5

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.
}