Question

如何在浏览器中显示多行注释或消息？例如，如果我希望用户单击一个框并让浏览器以问题＃1-10的格式显示多行：

<!DOCTYPE html>
<html>
    <body>

        <h1>Mathematics Review</h1>

        <p>Click Below For a Quick Review:</p>

        <button type="button" onclick="myFunction()">Click Me!</button>

        <p id="demo">Please Take Notes!</p>

        <script>
            function myFunction() { 
                document.getElementById("demo").innerHTML = "Question #1";
            }
        </script>

    </body>
</html>

最终，当用户点击“Click Me”按钮时，问题应显示如下：

Question #1
Question #2
Question #3
Question #4
and so on....

另外，尝试实现此操作时，不同的浏览器会有不同的行为吗？

Answer 1

您可以在<br>值中添加innerHTML代码：

document.getElementById("demo").innerHTML = "Question #1<br>Question #2<br>Question #3<br>Question #4";

Answer 2

var count = 1;      
function myFunction() { 
  document.getElementById("demo").innerHTML += "<br/>Question #"+(count++);
}

<h1>Mathematics Review</h1>
<p>Click Below For a Quick Review:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">Please Take Notes!</p>

Answer 3

您可以使用：

document.getElementById("demo").innerHTML += "<br/>Question #" + ++question;

其中question是全局变量，初始化为零 - 请参阅下面的演示：

＆＃13;

var question = 0;
function myFunction() {
  document.getElementById("demo").innerHTML += "<br/>Question #" + ++question;
}

＆＃13;

<h1>Mathematics Review</h1>

<p>Click Below For a Quick Review:</p>

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo">Please Take Notes!</p>

＆＃13;

Answer 4

声明全局变量，clickcount然后在运行myFunction时递增它。

更多的事情你应该提醒的是在脚本标签之间保持评论，避免浏览器之间的一些解析错误，如firefox，chrome，IE等。

这是我的解决方案。

<!DOCTYPE html>
  <html>
  <body>

  <h1>Mathematics Review</h1>

  <p>Click Below For a Quick Review:</p>

  <button type="button" onclick="myFunction()">Click Me!</button>

  <p id="demo">Please Take Notes!</p>

  <script language="JavaScript">
  <!--
  var clickcount = 1;
  function myFunction() { 
  document.getElementById("demo").innerHTML = "Question #" + clickcount++;
  }
  -->
  </script>

  </body>
  </html>

并且，您可以使用setInterval功能，如果您想要某些效果，例如在某段时间自动增加数字。

每次只需单击按钮，这是另一个10次迭代。

<!DOCTYPE html>
<html>
<body>

<h1>Mathematics Review</h1>

<p>Click Below For a Quick Review:</p>

<button type="button" onclick="try10Iter()">Click Me!(10 iteration)</button>
<button onclick="myVar = setTimeout(try10Iter, 500)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>

<p id="demo">Please Take Notes!</p>

<script language="JavaScript">
    <!--
        var clickcount = 1;
        var countVar;

        function stopIterAt(condition)
        {
            if(clickcount == condition) 
            {
                clearInterval(countVar);
                clickcount = 0;
            }
        }

        function myFunction() { 
            document.getElementById("demo").innerHTML = "Question #" + clickcount++;
            stopIterAt(11)
        }

        function try10Iter()
        {
            countVar = window.setInterval(myFunction, 500);
        }
    -->
</script>

</body>

我从site借用了一些代码。

此致

多行注释和/或显示

4 个答案: