Question

我是HTML和JavaScript新手。我的HTML页面中有以下代码，但它没有给出预期的输出。

<body>
    <script>
    var a=1;
    if(a==2)
    </script>
    <h3>this is h3 heading.</h3>
</body>

输出为this is h3 heading，但我认为条件失败，因此不会产生任何结果。我该如何运行？任何人都可以告诉我，上面的JavaScript代码和HTML如何工作。我确实怀疑，当html页面由html标签和javascript代码组成时，谁以及如何执行那些html标签和js代码？

Answer 1

欢迎使用Javascript - 这是您的代码！

<body>
    <h3 id="header"></h3>
    <script>
    var a = 1; //set a to 1
    if (a == 2) { //if a is 2 then...
        document.getElementById("header").innerHTML = "This is h3 Heading!"; //output
    }
    </script>
</body>

这是一个包含函数和click事件的扩展代码的JSFiddle。只需单击“结果”区域，将a递增1即可获得结果！ http://jsfiddle.net/neuroflux/8Lkax/1/

Answer 2

如果您想使用这样的条件，您应该考虑使用PHP，或者您必须调整代码，可能的解决方案如下：

       <BODY>
             <div id="test">

             </div>
                <script>
                 var a=1;
                 if(a==2)
                 document.getElementById("test").innerHTML="<h3>this is h3 heading</h3>";
                </script>
                 </BODY>

如果脚本中的条件返回true，则编辑innerHTML，即具有id test的标记的内容。你也可以用PHP解决它，但既然你说你是HTML的新手，你应该先尝试JS解决方案。

此致

Answer 3

我认为这里的问题是JavaScript的工作方式与PHP之类的预处理器完全不同。这里要理解的最重要的事情是每个<script>块都是单独运行的，并且对它周围的HTML没有影响。

因此，当您将JavaScript和HTML混合在一起时（如您的示例中所示），它将按顺序执行以下操作：

设置空白页面（<body>）
在<script>
将<h3>添加到页面（包括所有文字）

JavaScript可以在步骤＃2中执行 nothing ，它将完全改变步骤3。这些步骤都是完全独立的。无论您的if语句成功还是失败都无关紧要 - 步骤＃3将以任何一种方式发生。

那你该怎么做呢？

一个好的模式（我认为）是将所有JavaScript放在页面底部。这样，只有两个步骤：

加载页面
运行JavaScript

在步骤＃1中加载页面后，JavaScript可以在步骤＃2中更改页面。例如：

<html>
    <head>
        <title>Demo page</title>
    </head>
    <body>
        Today is a <span id="mood-result">???</span> day.

        <script>
            var resultElement = document.getElementById('mood-result');
            var a = 1;
            if (a === 2) {
                resultElement.innerHTML = "bad";
            } else {
                resultElement.innerHTML = "good";
            }
        </script>
    </body>
</html>

所以这里发生的是整个页面加载（说“今天是???天”），然后JavaScript立即从页面中取出一个元素，然后更改它。

我认为StackOverflow不是一个尝试从头开始学习语言的好地方。但是，希望这会让你在理解另一个指南的好地方。你试过CodeAcademy吗？

使用javascript代码和html代码

3 个答案:

那你该怎么做呢？