html中的Javascript div输出不起作用

Question

我正在使用这个 innerhtml 属性将我的 javascript 输出打印到 html 中的 div 中。我检查了其他有相同问题的主题，但似乎没有任何效果。

以下代码都在我的html中的'body'标签之间。

代码：

<script> function firstGame(); </script>

<div id="outputgame"> </div>
<button onclick="functionGame()"> Starten </button>

<script type="text/javascript">
    function firstGame()
    {
        var output = document.getElementById('outputgame');
        output.innerHTML('<p>First test</p>');

        // Check if the user is ready to play!
        confirm("Are you ready to play this epic game?")

        var age = prompt("What is your age?");
        if (age < 13)
        {
            document.getElementById('outputgame').innerHTML= "You are to young to play this  game. You can proceed, however i do not take any responsibility";

        }
        else
        {
            document.getElementById('outputgame').innerHTML= "Sweet, Let's go!";
        }
     }
 </script>

Answer 1

我们来谈谈初始化时的页面渲染和global scope。 范围是值和表达式“可见”或可以引用的上下文。 The global scope 是整个 document 的上下文。如果在此处声明了一个值或函数，则它在每个函数或表达式中都是可见的。

您页面中的 JavaScript 一次被解析一个脚本块。当脚本块被正确解析时，脚本块被转移到全局范围内。所有公共值和表达式都可用的线程（存储在窗口对象中）。

首先解析函数，然后解析块的其余部分。但是，我之前编写的脚本块一次解析一个。因此，如果您调用尚未在全局范围内的函数，因为它位于另一个尚未解析的脚本块中，您的代码将失败并抛出未定义的错误。

考虑一下：

 <script>
     function test()
     {
         alert(1);
     }
     test();
 </script>

显示了一个很好的警报。函数test首先被解析，然后test被执行。

 <script>
     test();
     function test()
     {
         alert(1);
     }

 </script>

这也有效。由于函数首先被解析 test() 仍然有效并提醒 1。

 <script>
     test();
 </script>
 <script>
     function test()
     {
         alert(1);
     }

 </script>

但是这行不通。由于第二个脚本块中的函数test 尚未解析，调用test() 将导致脚本错误。

 <script>
     function test()
     {
         alert(1);
     }

 </script>
 <script>
     test();
 </script>

这确实有效。该函数首先声明并添加到全局范围。在第二个脚本块test() 中查找global scope 中的函数test，找到并执行它。

这是适用于您的代码的上述解释：

<div id="outputgame"> </div>
<button onclick="functionGame()"> Starten </button>

<script type="text/javascript">
    function firstGame()
    {
        var output = document.getElementById('outputgame');
        output.innerHTML = '<p>First test</p>';

        // Check if the user is ready to play!
        // Do you really need this?
        //Confirm returns a Boolean (true or false), you can do something with the result. If not just show an alert or nothing. Latter is preferred. 
        confirm("Are you ready to play this epic game?")

        var age = prompt("What is your age?");
        //You should make this more robust. What if someone enters "asaaslk". Use a select box with birth years.
        if (age < 13)
        {
            document.getElementById('outputgame').innerHTML = "You are to young to play this  game. You can proceed, however i do not take any responsibility";

        }
        else
        {
            document.getElementById('outputgame').innerHTML = "Sweet, Let's go!";
        }
     }
 </script>
 <script> function firstGame(); </script>

Answer 2

        <div id="outputgame"> </div>
        <button onclick="firstGame()"> Starten </button>
        <script type="text/javascript">

        function firstGame()
        {
            var output = document.getElementById('outputgame');

            output.innerHTML = '<p>First test</p>';

            // Check if the user is ready to play!
            confirm("Are you ready to play this epic game?")

            var age = prompt("What is your age?");
            if (age < 13)
            {
                document.getElementById('outputgame').innerHTML= "You are to young to play this  game. You can proceed, however i do not take any responsibility";

            }
            else
            {
                document.getElementById('outputgame').innerHTML= "Sweet, Let's go!";
            }
         }
         </script>

Answer 3

HTML

<div id="outputgame"> </div>
<button onclick="firstGame()"> Starten </button>

javascript

<script type="text/JavaScript">
function firstGame()
{
var output = document.getElementById('outputgame');
output.innerHTML='<p>First test</p>';

// Check if the user is ready to play!
confirm("Are you ready to play this epic game?")

var age = prompt("What is your age?");
if (age < 13)
{
document.getElementById('outputgame').innerHTML= "You are to young to play this  game.You can proceed, however i do not take any responsibility";

}
else
{
    document.getElementById('outputgame').innerHTML= "Sweet, Let's go!";
}
}

</script>

Answer 4

两个问题：您将函数命名为错误名称？并且您将 innerHTML 作为函数调用而不是为其分配值。

另外，functionGame() 是在哪里定义的？不能像 C 中那样使用前向声明。

function firstGame() {
  var output = document.getElementById('outputgame');
  var text = '';
  output.innerHTML = '<p>First test</p>';

  // Check if the user is ready to play!
  confirm("Are you ready to play this epic game?")

  var age = parseInt(prompt("What is your age?"), 10);
  if (age < 13) {
    text = "You are to young to play this game. You can proceed, however I do not take any responsibility.";
  } else {
    text = "Sweet, Let's go!";
  }

  document.getElementById('outputgame').innerHTML = text;
}

<div id="outputgame"></div>
<button onclick="firstGame()">Starten</button>