Uncaught ReferenceError: is not defined at HTMLButtonElement.onclick

I have looked at other Questions of this type and none of them solved my problem. I am having this JavaScript code:

var count1;
for (count1 = 1; count1 < 11; count1++)
var article = res.articles[count1]
var ImageURL = res.articles[count1].urlToImage
$('#showNews').append('<div id="' + count1 + '" class="article"><div class="overlayart"><div class="art"><h3>' + article.title + '</h3 <p>' + article.description + '<br><br><button onclick="divLoad()">Follow Link</button></p></div></div></div>');
$("#" + count1).css('background-image', 'url(' + ImageURL + ')');
x = article.url;


function divLoad()
alert(article.url);
;


Basically there are 10 items with different articles. Scopes of variables are all correct. I can see the links of the items when I console log them in the loop. I want to alert each URL whenever each Item is clicked for a respected button. But when I click that I get the error:

Uncaught ReferenceError: divLoad is not defined
at HTMLButtonElement.onclick

Am I missing something?

EDIT [My Full Code]:

var x;
function divLoad()
alert(x);
;
$(document).ready(function(){
var url = 'https://newsapi.org/v2/top-headlines?country='+country+'&apiKey=MYAPIKEY';
$.getJSON(url).then(function(res)
//console.log(res)
var count1;
for(count1 = 1; count1 < 11; count1++)
var article = res.articles[count1]
var ImageURL = res.articles[count1].urlToImage
x = article.url;
$('#showNews').append('<div id="'+count1+'" class="article"><div class="overlayart"><div class="art"><h3>'+article.title+'</h3><p>'+article.description+'<br><br><button onclick="divLoad()">Follow Link</button></p></div></div></div>');
$("#"+count1).css('background-image','url(' + ImageURL + ')');




);


window.onload

$(document).ready(function(){ ... )

divLoad

1 Answer
1

The problem is that you're always referencing one single, global variable. That variable (x) will only ever hold the last value it was set to in your for loop.

x

for

Instead, we can append the articles and give each one a data attribute - that way, we can associate each element with a specific article URL.

function divLoad(url)
alert(url);
;

$(document).ready(function()
var url = 'https://newsapi.org/v2/top-headlines?country=' + "test" + '&apiKey=MYAPIKEY';
$.getJSON(url).then(function(res)
for (let count1 = 1; count1 < 11; count1++)
let article = res.articles[count1];
$('#showNews').append('<div id="' + count1 + '" class="article"><div class="overlayart"><div class="art"><h3>' + article.title + '</h3><p>' + article.description + '<br><br><button class="article-btn">Follow Link</button></p></div></div></div>');
$("#" + count1)
.css("background-image", "url('" + article.urlToImage + "'")
.attr("data-url", article.url); //Associate the URL to the element

);

$("#showNews").on("click", ".article-btn", function()
var url = $(this).closest(".article").attr("data-url"); //Get the associated URL
divLoad(url);
);
);


If you inspect the <div class="article"> now, you'll see each one has a data-url attribute that holds its URL.

<div class="article">

data-url

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.