时间戳

首页 > 解决方案 > 未捕获的 ReferenceError：未在 HTMLButtonElement.onclick 中定义

javascript - 未捕获的 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。但是当我点击它时，我得到了错误：

未捕获的 ReferenceError：divLoad 未在 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 + ')');

        }


    });

标签： javascript

解决方案

问题是您总是引用一个单一的全局变量。该变量 ( 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 的属性。

推荐阅读