创建“<a href="" onclick="function..." with="" javascript="" i="" get="" error:="" uncaught="" referenceerror:="" popup="" is="" not="" defined

时间:2016-02-14 12:25:51

标签: javascript jquery

="" I have puled data from server and created a list of thumbnails and some other data from twitch TV.

I need to create popup tab with video stream in it.

Therefore I have put thumbnail in anchor tag and called a popup() function onclick. (I am planing to put parameters for playing video in that function.) Also I have created function for that popup() but no matter where I place it I get an Error in console when I click on thumbnail.

ERROR: Uncaught ReferenceError: popup is not defined

This is the JS code:

$(document).ready(function(){   
    $.getJSON( "https://api.twitch.tv/kraken/streams", function( data ) {
    var items = [];
    var videoHTML ='<ul>';

    //Popup Tab with streaming video

    $.each(data.streams, function(i, video){ 
        videoHTML += '<li class="video-stream ' + video.channel.language + '">';
        videoHTML += '<img class="user-logo" src="' + video.channel.profile_banner + '">';
        videoHTML += '<p class="user-name">' + video.channel.display_name + '</p>';
        videoHTML += '<a href="#" onClick="popup()">';
        videoHTML += '<img class="video-image" src="' + video.preview.medium + '"></a>';
        videoHTML += '<h1 class="game-name">' + video.game + '</h1><br/>';
        videoHTML += '<i></i>';
        videoHTML += '<span class="views-number">' + video.viewers + '</span>';
        videoHTML += '<p class="short-date-format date' + i + '">' + video.created_at + '</p>';
        videoHTML += '</li>';

        var d = new Date(video.created_at);
        //var dateClass = 'date' + i;                 console.log(dateClass);
        //$(dateClass).html = d.toDateString();

    //console.log(video._id);
    //console.log(data.streams[i].game);

    //console.log(data.streams[i]._links.self);
    //console.log(data.streams[i].preview.medium);
    });

videoHTML += '</ul>';
$('#placeholder').html(videoHTML);

    }); //getJson

    //popup tab
    function popup(){
    alert('wow');
    }           

}); //end ready

Can You please help me with this becasue I can not find an answer on the internet?

-How to get popup() function running? -How to implement parameter into this function?

(Also, I have tried to write anchor in HTML and add function and then everything works fine but when I create HTML with JS then I have this problem.

Thank You in front!

Sincerely,

Denis

1 个答案:

答案 0 :(得分:1)

您在$(document).ready(function())中定义了函数popup。因此弹出窗口只能在其中使用。

将它移到$(document).ready(function())函数之外,如下所示

$(document).ready(function(){
    // code
}) 
function popup(){
    // code
}