Javascript:在使用innerHTML

时间:2016-06-19 20:36:28

标签: javascript jquery html google-chrome

我已经在stackoverflow和其他网站上查看了5个以上的问题,我似乎无法使这个代码工作。我尝试过while循环,但它只是崩溃了chrome,我尝试使用布尔技巧无济于事,内联代码不允许使用chrome,所以我不能只是调用代码内联。这是chrome应用程序代码。做好准备有很多我尽可能地切出来。

JavaScript文件

window.onload = function()
{
    myFuncs.ajaxRequest(".latest-ads", "POST", ""); //Value taken out for stackoverflow question 
    setTimeout(function() {
        nwywtst.style.transition = "all 2s";
        nwywtst.style.opacity = 100;
    }, 2000);
}

//If the user did not like the ads, make them invisible and then display categories 

nwywtst.addEventListener("click", function() {
    for (var i = 0; i < latestAds.length; i++)
    {
        latestAds[i].style.display = "none";
    }
    nwywtst.innerHTML = "<p><strong>Thank you for your feedback!</strong></p>";
    setTimeout(function() {
        nwywtst.style.transition = "all 2s";
        nwywtst.style.opacity = 0;
    }, 1000);
    setTimeout(function() {
        nwywtst.style.display = "none";
        listGroup[0].style.transition = "all 2s";
        listGroup[0].style.display = "block";
    }, 2000);
}, false);

//Other event listeners - also used to dynamically change html with ajax 

reuseEvents();
function reuseEvents()
{
    if (reuseEventAttr === "reuse")
    {
        lgi1.addEventListener("click", lgi1Handler, false);
        lgi2.addEventListener("click", lgi2Handler, false);
        lgi3.addEventListener("click", lgi3Handler, false);
        lgi4.addEventListener("click", lgi4Handler, false);
        lgi5.addEventListener("click", lgi5Handler, false);
        lgi6.addEventListener("click", lgi6Handler, false);
        lgi7.addEventListener("click", lgi7Handler, false);
        document.addEventListener("keydown", restoreHandler, false);
    }
}

//handlers for the event listeners

function lgi1Handler(){listGroup[0].style.transition = "all 2s";listGroup[0].innerHTML = myFuncs.ajaxRequest(".listGroup", "POST", "../html/category1.txt");reuseEvents();}
function lgi2Handler(){listGroup[0].style.transition = "all 2s";listGroup[0].innerHTML = myFuncs.ajaxRequest(".listGroup", "POST", "../html/category2.txt");reuseEvents();}
function lgi3Handler(){listGroup[0].style.transition = "all 2s";listGroup[0].innerHTML = myFuncs.ajaxRequest(".listGroup", "POST", "../html/category3.txt");reuseEvents();}
function lgi4Handler(){listGroup[0].style.transition = "all 2s";listGroup[0].innerHTML = myFuncs.ajaxRequest(".listGroup", "POST", "../html/category4.txt");reuseEvents();}
function lgi5Handler(){listGroup[0].style.transition = "all 2s";listGroup[0].innerHTML = myFuncs.ajaxRequest(".listGroup", "POST", "../html/category5.txt");reuseEvents();}
function lgi6Handler(){listGroup[0].style.transition = "all 2s";listGroup[0].innerHTML = myFuncs.ajaxRequest(".listGroup", "POST", "../html/category6.txt");reuseEvents();}
function lgi7Handler(){listGroup[0].style.transition = "all 2s";listGroup[0].innerHTML = myFuncs.ajaxRequest(".listGroup", "POST", "../html/category7.txt");reuseEvents();}
function restoreHandler(e){if (e.keyCode === 37){listGroup[0].style.transition = "all 2s";listGroup[0].innerHTML = myFuncs.ajaxRequest(".listGroup", "POST", "../html/restore.txt");reuseEvents();}}

popup.html

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'" />
        <link rel="stylesheet" type="text/css" href=""> <!-- Taken out for stack overflow -->
        <link rel="stylesheet" type="text/css" href=""> <!-- Taken out for stack overflow -->
    </head>
    <body>
        <div class="wrapper">
            <div class="latest-ads" id="latest-ads" onload="hello();">

            </div>
            <div class="nwywtsm">
                <p id="nwywtst" style="opacity: 0">Not what you want to see?</p>
            </div>
            <div class="list-group listGroup" style="display: none" data-reuseEvent="reuse">
                <a href="#" class="list-group-item" id="lgi1">Food</a>
                <a href="#" class="list-group-item" id="lgi2">Software</a>
                <a href="#" class="list-group-item" id="lgi3">Hardware</a>
                <a href="#" class="list-group-item" id="lgi4">Home appliances</a>
                <a href="#" class="list-group-item" id="lgi5">Outdoor appliances</a>
                <a href="#" class="list-group-item" id="lgi6">Services</a>
                <a href="#" class="list-group-item" id="lgi7">Other</a>
            </div>
        </div>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/ad-injection.js"></script>
    </body>
</html>

加载restore.txt时会删除事件。我似乎无法让他们再次启用。我怎样才能做到这一点?出于某些原因,我更喜欢这样做。我从程序中取出了变量和类,使其更短。这是主要代码。无论如何我该如何解决这个问题?我已经这样做了几个小时。

0 个答案:

没有答案