Как я могу отображать многострочные комментарии или сообщения в браузере? Например, если я хотел, чтобы пользователь щелкнул поле и браузер отобразил несколько строк в формате вопроса № 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>

В конечном итоге, когда пользователь нажимает кнопку «Нажмите меня», вопросы должны отображаться так:

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

Кроме того, разные браузеры ведут себя по-разному при попытке реализовать это?

0
PreYvin 29 Авг 2017 в 04:58

4 ответа

Лучший ответ

Объявите глобальную переменную, щелкните счетчик, а затем увеличивайте его при каждом запуске 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>

Я позаимствовал некоторый код с сайта.

С Уважением,

0
tommybee 30 Авг 2017 в 01:24

Вы можете добавить теги <br> к своему значению innerHTML:

document.getElementById("demo").innerHTML = "Question #1<br>Question #2<br>Question #3<br>Question #4";
0
CrackpotCrocodile 29 Авг 2017 в 02:01

Вы можете использовать:

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

Где question - переменная global , инициализированная нулем - см. демонстрацию ниже:

var question = 0;
function myFunction() {
  document.getElementById("demo").innerHTML += "<br/>Question #" + ++question;
}
<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>
0
kukkuz 29 Авг 2017 в 02:02
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>
0
zynkn 29 Авг 2017 в 02:02