CODEWITHSUNDEEP
javascriptjson
Marcus
Marcus

Reputation: 425

How do I pass the value of my onClick event to my second function?

Basically I have an <input> field where I start typing in a name. As I type, html pops up with an unordered list <ul> featuring names of my videos from my JSON file. What I'm trying to do is be able to click on the button, and play the video in the <video> player. However, "val.name" is not being passed to function g(); when I click on it.

$('#search').keyup(function() {
    var searchField = $('#search').val();
    var myExp = new RegExp(searchField, "i");
    $.getJSON('data.json', function(data) {
        var output = '<ul class="searchresults">';
        $.each(data, function(key, val) {
            if (val.name.search(myExp) != -1) {
                output += '<li>';
                output += '<div>'+ val.name +'</div>';
                output += '<img src="images/'+ val.name +'.jpg" alt="'+ val.name +'" />';
                output += '<button onClick="g('+ val.name +')" >Help Me Here</button>';                     
                output += '</li>';
            }
        });
        output += '</ul>';
        $('#update').html(output);
    });
});


function g(e){
    $('#videoObj').remove();
    $('<video controls preload="metadata" id="videoObj" width="100%" height="720"  src="videos/'+e+'.mp4" type="video/mp4" frameborder="0" allowfullscreen><track label="English" kind="subtitles" srclang="en" src="subtitles/'+e+'.vtt" ></video>').prependTo('#vholder').attr('autoplay','autoplay');  
}

Upvotes: 0

Views: 39

Answers (1)

Nawed Khan
Nawed Khan

Reputation: 4401

The html string is malformed. change this

output += '<button onClick="g('+ val.name +')" >Help Me Here</button>';

to this

output += '<button onclick="g(\''+ val.name +'\')" >Help Me Here</button>';

Upvotes: 1

Related Questions