Javascript div html 中的输出不工作

Question

我正在使用这个内部 html 属性将我从 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

        <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 2

两个问题：你给你的函数命名错误的名字？，你正在调用 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>

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

我们来谈谈初始化时的页面渲染和global scope。 作用域是值和表达式 "visible," 或可以被引用 的上下文。 The global scope 是整个 document 的上下文。如果在这里声明了一个值或函数，它在每个函数或表达式中都是可见的。

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

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

考虑一下：

 <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>

Javascript div html 中的输出不工作

Javascript div output in html not working

html

javascript

innerhtml

output