CODEWITHSUNDEEP
javascriptjqueryhtml
sflee
sflee

Reputation: 1719

How to call get attribute from a li tag in html file

I want to do is similar to this.

When I click on the "Movie A", I hope the function $('#playlist li').click(function(){...}) will be called, but it seems that nothing happens. What is the problem?

index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Home Video Player</title>
</head>
<body>      
    <video id="video" width="640" height="320" controls="controls">
        Your browser does not support the video tag.
    </video>    
    <ul id="playlist">
        <li movieurl="a,mp4" movietype="video/mp4">Movie A</li>
        <li movieurl="b.mp4" movietype="video/mp4">Movie B</li>          
        <li movieurl="c.mp4" movietype="video/mp4">Movie C</li>      
        <li movieurl="d.mp4" movietype="video/mp4">Movie D</li>
    </ul>       
    <script src="main.js"> </script>
</body>
</html>

main.js

$(document).ready(function(){
    $('#playlist li').click(function(){
        var video = document.getElementById('video');
        var source = document.createElement('source');
        source.setAttribute('src', $(this).attr("movieurl"));
        source.setAttribute('type', $(this).attr("movietype"));
        video.appendChild(source);
    });
});

Upvotes: 0

Views: 441

Answers (4)

Oscar Bout
Oscar Bout

Reputation: 680

Add this to your html <head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Upvotes: 2

Rizky Fakkel
Rizky Fakkel

Reputation: 9173

Put the following code in between your <head> tags:

<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script language="javascript" type="text/javascript" src="main.js"></script>

In order to use jQuery and javascript files, you need to tell your html document that there are JS files that the page's behavior can be interpreted from.

Also, since you are using jQuery, you can replace

document.getElementById('video');

with

$('#video');

EDIT: I stand corrected, the best practice for scripts is to add them to the end of your body.

Upvotes: 1

Fazer87
Fazer87

Reputation: 1242

You haven't referenced JQuery.

You will most liekly see in a console (Firebug for example) "$ is not defined".. meaning the JQuery "$" object hasn't been created.

To fix this, include a reference to JQuery (either locally or on a CDN)

<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

or 

<script language="javascript" type="text/javascript" src="jquery-1.11.3.min.js"></script>

should do what you need it to.

Remember that JQuery must be defined BEFORE your script:

<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script language="javascript" type="text/javascript" src="main.js"> </script>

You can get a correct version of JQuery to use from https://code.jquery.com/jquery/

Also, as others have noted:

  • movie,a should probably be movie.a in your bullet list
  • You can get elements by using $('#elementid') instead of using getElementById in JQuery - much shorter to type!

Upvotes: 2

Tony
Tony

Reputation: 351

If you're going to use Jquery, you need to link it, here's the CDN link. 

   <script language="javascript" type="text/javascript"   src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

Upvotes: 4

Related Questions