如何在加载其他页面元素后加载javascript?

时间:2016-10-11 16:14:24

标签: javascript html

所以我用HTML制作了这个摇滚纸剪刀游戏。当页面加载时,它会通过弹出窗口要求用户输入。问题是我的任何div之前的弹出窗口加载,我想在弹出脚本开始之前显示所有的html元素。

这是我的代码:

<body>
    <div class="user">
        <div class="container">You choose:</div>
        <div id="userInput"></div>
    </div>
    <div class="computer">
        <div class="container">Computer chooses:</div>
        <div id="computerInput"></div>
    </div>
    <div class="results">
        <div class="container">Results:</div>
        <div id="resultsOutput"></div>
    </div>

    <script type="text/javascript">
            var userInput = prompt("Do you choose rock, paper or scissors?");
        var computerChoice = Math.random();
        if (userInput === "rock" || userInput === "paper" || userInput === "scissors") {
            var userChoice = userInput
        } else {
            userChoice = "Invalid entry, sorry. "
        }

        if (computerChoice < 0.34) {
            computerChoice = "rock";
        } else if (computerChoice <= 0.67) {
            computerChoice = "paper";
        } else {
            computerChoice = "scissors";
        }
        console.log("Computer: " + computerChoice);

        function compare(choice1, choice2) {
            if (userInput === "rock" || userInput === "paper" || userInput === "scissors") {
                if (choice1 === choice2) {
                    return "The result is a tie!";
                } else if (choice1 === "rock") {
                    if (choice2 === "scissors") {
                        return "rock wins";
                    } else {
                        return "paper wins"
                    }
                } else if (choice1 === "paper") {
                    if (choice2 === "rock") {
                        return "paper wins";
                    } else {
                        return "scissors wins";
                    }
                } else if (choice1 === "scissors") {
                    if (choice2 === "rock") {
                        return "rock wins";
                    } else {
                        return "scissors wins"
                    }
                }
            } else {
                return "Results not calculated."
            }
        }
        document.getElementById("userInput").innerHTML = userChoice;
        document.getElementById("computerInput").innerHTML = computerChoice
        compare(userChoice, computerChoice);
        document.getElementById("resultsOutput").innerHTML = compare(userChoice, computerChoice)

    </script>
</body>

8 个答案:

答案 0 :(得分:3)

您的javascript在加载页面的其余部分之前执行

您正在尝试使用CreateMap<Cart, CartModel>() .ForMember(dest => dest.LineItems, opt => opt.MapFrom(src => src.LineItems)) .ForMember(dest => dest.LineItems.Select(x => x.CustomField), opt => opt.MapFrom(src => src.LineItems.Select(y => y.Description))); ,但您做错了。 Dim x, z Set a = Sheets("Working") Set b = Sheets("Peer Review") Set c = Sheets("Waiting to Push") Set d = Sheets("Completed") x = 1 z = 2 Do Until IsEmpty(a.Range("I" & z)) If a.Range("I" & z) = "Peer" Then x = x + 1 b.Rows(x).Value = a.Rows(z).Value Else If a.Range("I" & z) = "Waiting" Then x = x + 1 c.Rows(x).Value = a.Rows(z).Value End If End If z = z + 1 Loop 应该是一个函数,如下所示:

window.onload

但这只适用于你只想在页面加载时启动一个功能的情况。一般来说,最好使用window.addEventListener方法,因为你可以使用多个方法,所有方法都将被执行。

如果你使用另一个window.onload,它将覆盖第一个。

这就是我推荐使用的原因:

window.onload = function(){
    //your code here
}

答案 1 :(得分:1)

解决方案1:

您可以将脚本放在HTML文档的底部。这将在<div>元素加载后运行您的代码:

<html>
<head></head>
<body>
    <div></div>
    <div></div>
    <div></div>
    ...
    <script>
        // Put your JS code here
    </script>
</body>
</html>
</html>

解决方案2: 另外,您可以将所有JS放在window.onload事件侦听器中:

window.onload = function() {
    // Put your JS code here
};

答案 2 :(得分:0)

你可以做三件事。

  1. 在html页面中的结束体标记之前添加脚本标记。
  2. 将您的逻辑称为身体onload事件的一部分

    document.body.onload = function() { console.log('I loaded!'); };

  3. 如果您使用的是jquery,可以通过执行以下操作获得与上面相同的结果:

    $(function() { console.log('I loaded!'); })(jQuery);

答案 3 :(得分:0)

如果你使用jQuery,Hero1134是完全正确的。如果你正在使用jQuery,你应该使用

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

.ready函数将在DOM准备好后立即执行(加载html元素并准备对其进行处理)。如果你使用.load,你会等待页面上的每个元素全部加载,这样你就不得不等待大图像等待加载。在某些页面上,这两种方法之间的区别可能是几秒钟!

您也可以在文件末尾运行脚本

<body>
  <divs />
  <script>var userInput = prompt("Do you choose rock, paper or scissors?"); ...</script>
</body>

因此脚本可以使用这些元素。

如果您只想使用没有依赖关系的Plain Old javascript,并且您希望将js包含在文件的顶部,则可以修复此行

window.onload = var userInput = prompt("Do you choose rock, paper or scissors?"); ...

改为

window.onload = function(){ var userInput = prompt("Do you choose rock, paper or scissors?"); ... }

答案 4 :(得分:0)

你有两个选择 1.在JavaScript中你可以像下面的语法

那样做
document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);

2.在Jquery中这样做

$(document).ready(function(){
// your code here
});

答案 5 :(得分:0)

也许你可以试试这个......

<div id="quiz">
    <div class="user ">
        <div class="container">You choose:</div>
        <div id="userInput"></div>
    </div>
    <div class="computer">
        <div class="container">Computer chooses:</div>
        <div id="computerInput"></div>
    </div>
    <div class="results">
        <div class="container">Results:</div>
        <div id="resultsOutput"></div>
    </div>
</div>

<script type="text/javascript">


    window.onload = function(){

        if( document.getElementById('quiz') ){

            var userInput = prompt("Do you choose rock, paper or scissors?");
            var computerChoice = Math.random();
            if (userInput === "rock" || userInput === "paper" || userInput === "scissors") {
                var userChoice = userInput
            } else {
                userChoice = "Invalid entry, sorry. "
            }

            if (computerChoice < 0.34) {
                computerChoice = "rock";
            } else if (computerChoice <= 0.67) {
                computerChoice = "paper";
            } else {
                computerChoice = "scissors";
            }

            console.log("Computer: " + computerChoice);
            document.getElementById("computerInput").innerHTML = computerChoice;
            if( userChoice !== undefined ){
                 document.getElementById("userInput").innerHTML = userChoice;
                 compare(userChoice, computerChoice);
                 document.getElementById("resultsOutput").innerHTML = compare(userChoice, computerChoice)
            }

        }

    }


    function compare(choice1, choice2) {

        if (userInput === "rock" || userInput === "paper" || userInput === "scissors") {
            if (choice1 === choice2) {
                return "The result is a tie!";
            } else if (choice1 === "rock") {
                if (choice2 === "scissors") {
                    return "rock wins";
                } else {
                    return "paper wins"
                }
            } else if (choice1 === "paper") {
                if (choice2 === "rock") {
                    return "paper wins";
                } else {
                    return "scissors wins";
                }
            } else if (choice1 === "scissors") {
                if (choice2 === "rock") {
                    return "rock wins";
                } else {
                    return "scissors wins"
                }
            }
        } else {
            return "Results not calculated."
        }
    }


</script>

答案 6 :(得分:-1)

使用功能

 $(window).load(function () {

});

答案 7 :(得分:-1)

您可以在执行JavaScript之前使用JQuery加载HTML页面。类似的东西可以起作用。

$(document).ready(init);
function init(){
 //your JavaScript code here 
}