Uncaught referenceerror: не определен в htmlbuttonelement.onclick

Я просмотрел другие вопросы этого типа, и ни один из них не решил мою проблему. У меня есть этот код JavaScript:

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);
};

В основном есть 10 наименований с разными артикулами. Все области видимости переменных верны. Я вижу ссылки на элементы, когда консоль регистрирую их в цикле. Я хочу предупреждать каждый URL-адрес всякий раз, когда каждый элемент нажимается для уважаемой кнопки. Но когда я нажимаю на нее, я получаю сообщение об ошибке:

Uncaught ReferenceError: divLoad is not defined at HTMLButtonElement.onclick

Я что-то упускаю?

ИЗМЕНИТЬ [Мой полный код]:

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?

Pointy 13.09.2018 18:10

да, он упакован внутри $(document).ready(function(){ ... )

Kumar Priyansh 13.09.2018 18:12

хорошо, если divLoad находится внутри блока готовности документа, то он не является глобальным.

epascarello 13.09.2018 18:13

Ой. Я попытался переместить его в начало документа, готового. Теперь он предупреждает URL-адрес последнего элемента каждый раз, независимо от того, что я нажимаю.

Kumar Priyansh 13.09.2018 18:17

Подумайте об этом .... У вас есть несколько вещей, вызывающих одну и ту же функцию ...

epascarello 13.09.2018 18:18

Измените ваш var ImageURL на let ImageURL. И var count1 на let count1

Kaizaki Arata 13.09.2018 18:21

Можете ли вы отредактировать свое сообщение и добавить полный обновленный код? Я не понимаю, как divLoad (если его вынести за пределы document.ready, как вы сказали) вообще может получить доступ к article.

Tyler Roper 13.09.2018 18:22

Ваш цикл должен выглядеть так для (пусть count1 = 1; count1 <11; count1 ++) {}. Удалить var count1;

Kaizaki Arata 13.09.2018 18:24

Я редактировал с полным кодом. Пожалуйста, проверьте. И я не думаю, что let count1 работает.

Kumar Priyansh 13.09.2018 18:25

@KumarPriyansh Вы обновляете одну и ту же переменную x на каждой итерации. Ваша функция просто предупреждает текущее значение x. Он всегда будет просто предупреждать о том, что x был установлен на последний. Вам нужно будет параметризовать вашу функцию, чтобы она могла ссылаться на конкретную статью.

Tyler Roper 13.09.2018 18:27

@TylerRoper, что мне делать, чтобы остановить эту итерацию и загрузить разные URL-адреса? Я действительно не могу придумать параметризованную функцию. Вы можете показать мне, как это сделать? PS: Я знаю, что такое параметризованная функция, я не знаю, что делать в этом случае

Kumar Priyansh 13.09.2018 18:28
1
11
1 894
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема в том, что вы всегда ссылаетесь на одну глобальную переменную. Эта переменная (x) всегда будет содержать только последнее значение, которое она была установлена ​​в вашем цикле for.

Вместо этого мы можем добавить статьи и присвоить каждой из них атрибут данных - таким образом, мы можем связать каждый элемент с определенным 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);
    });
});

Если вы сейчас осмотрите <div class="article">, вы увидите, что у каждого из них есть атрибут data-url, содержащий его URL.

Другие вопросы по теме