页面上未应用JavaScript

下面是我用JavaScript编写的代码，该脚本在网页上引用。当页面加载时，会发生一个JavaScript调用，逻辑的动作应该呈现在网页上

现在，脚本正在网页上启动，但该操作没有在网页上呈现。但是，如果我在页面控制台上执行脚本，就会发生更改

<script>
function bannerLoad() {
  var delayAddOn = setInterval(function() {
    if ($(".add-ons").hasClass("current")) {
      if ($('.addons-sidebar.clearfix img').length < 1) {
        $(".addons-container :last").append($('<img>', {
          class: 'img-responsive',
          src: 'https://www.abc.in/content/dam/abc/6e-website/banner/target/2018/06/abc.png'
        }));
      }
      clearInterval(delayAddOn);
    }
  }, 100);
};

window.onload = function() {
  bannerLoad();
};
window.onclick = function() {
  bannerLoad();
};
</script>

函数bannerLoad（）{
var delayAddOn=setInterval（函数（）{
if（$（“.add-ons”）.hasClass（“当前”））{
if（$（'.addons-sidebar.clearfix img'）。长度<1）{
$（“.addons容器：last”）.append（$（'

---

是否有人可以检查是否存在任何问题？

当页面完全加载时，您需要调用脚本，否则将调用该函数，并且找不到DOM元素

您应该将代码包装在ready函数中：

<script>
    //OPEN THE READY FUNCTION
    $(function(){ 
        bannerLoad(); //Call of your function when the page is fully loaded
        $(window).click(bannerLoad);    
    }); 
    //CLOSE THE READY FUNCTION

    function bannerLoad() {
         var delayAddOn = setInterval(function() 
         {
             if($(".add-ons").hasClass("current"))
             {
                if($('.addons-sidebar.clearfix img').length < 1)
                {

                    $(".addons-container :last").append($('<img>',{class:'img-responsive',src:'https://www.abc.in/content/dam/abc/6e-website/banner/target/2018/06/abc.png'}));

                }

                clearInterval(delayAddOn);
             }
        }, 100);                
    };
</script>

//打开READY函数
$（函数（）{
bannerLoad（）；//当页面完全加载时调用函数
$（窗口）。单击（横幅加载）；
}); 
//关闭就绪功能
函数bannerLoad（）{
var delayAddOn=setInterval（函数（）
{
if（$（“.add-ons”）.hasClass（“当前”））
{
if（$（'.addons-sidebar.clearfix img'）。长度<1）
{
$（“.addons容器：last”）.append（$（'

在文档“就绪”之前，无法安全地操作页面。jQuery会为您检测到这种就绪状态。包含在$（文档）中的代码。就绪（）仅在页面文档对象模型（DOM）准备好JavaScript代码执行后才会运行。包含在$（窗口）中的代码。在（“加载”，函数（）{…}）将在整个页面（而不仅仅是DOM）就绪后运行

//一个$（document）.ready（）块。
$（文档）.ready（函数（）{
console.log（“准备就绪！”）；
bannerLoad（）；
$（窗口）。单击（横幅加载）；
});
函数bannerLoad（）{
if（$（“.add-ons”）.hasClass（“当前”））
{
if（$（'.addons-sidebar.clearfix img'）。长度<1）
{
$（“.addons container:last”）.append（$（'您的脚本有一些小问题。我将尝试对它们进行评估

因为
bannerLoad
是一个
函数
你不需要
；
在结尾。不是问题，只是一个提示

如前所述，
bannerLoad
是一个函数。那么为什么要在事件的函数中再次包装该函数呢？只需直接传递函数名，如
window.click=bannerLoad；
。请注意，末尾没有大括号，只需传递名称即可

您的函数将始终使用新的间隔创建一个新的
delayAddOn
变量。因此，每次单击时，将启动另一个间隔并在后台运行。如果您要这样做，则需要将该变量放在函数的外部，以便一次只运行一个间隔

使用
onload
而不是jQuery中的就绪状态没有什么错。但这属于页面设置和您所做的事情。正如其他人之前所说，在这里依赖就绪状态会更安全。因为您已经有了一个函数，您可以通过
$（bannerLoad）；
直接使用它


var-delayAddOn；
函数bannerLoad（）{
delayAddOn=setInterval（函数（）{
if（$（'.add-ons'）.hasClass（'current'））{
if（$（'.addons-sidebar.clearfix img'）。长度<1）{
$（'.addons容器：last'）。追加($（“您是否导入了必要的库？例如jQuery。？从语法上讲，代码似乎没有问题。您可以创建一个小提琴来重现这个问题吗？DOM元素在您开始对它们进行更改之前是否已呈现？您将脚本标记放在了何处？理想情况下，将其放在页脚部分。是的，jQuery ref网页上存在引用控制台中是否有错误？您是否尝试过该事件？
$（function（）{
和
窗口。onload
？似乎有点过分了
// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
    bannerLoad(); 
    $(window).click(bannerLoad);   
});

function bannerLoad() {
         if($(".add-ons").hasClass("current"))
         {
                if($('.addons-sidebar.clearfix img').length < 1)
                {

                    $(".addons-container :last").append($('<img>',{class:'img-responsive',src:'https://www.abc.in/content/dam/abc/6e-website/banner/target/2018/06/abc.png'}));

                }
                clearInterval(delayAddOn);
             }
        }, 100);                
    };

var delayAddOn;

function bannerLoad() {
    delayAddOn = setInterval(function() {
        if ($('.add-ons').hasClass('current')) {
            if ($('.addons-sidebar.clearfix img').length < 1) {
                $('.addons-container :last').append($('<img>', {
                    class: 'img-responsive',
                    src: 'https://www.abc.in/content/dam/abc/6e-website/banner/target/2018/06/abc.png'
                }));
            }

            clearInterval(delayAddOn);
        }
    }, 100);                
}

$(bannerLoad);
window.onclick = bannerLoad;