Не знаю как вывести текст из alert на html страницу. Помогите, пожалуйста

223
28 марта 2018, 03:37

Здравствуйте. Я хотел бы узнать как вывести текст на html страницу, который находится в alert (возможно я не правильно выражаюсь). В общем, вот код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        function go(){
            var step = 0
            going: while(true){
                function getRandomInt(min,max){
                    return Math.floor(Math.random() * (max - min)) + min
                }
                var make_a_step = getRandomInt(1,7)
                if(make_a_step > 2){
                    step = step + 1
                    alert("Вы сделали шаг номер " + step + ".")
                } else {
                    alert("Вы не сделали шаг.")
                    break going
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" onclick="go()" value="Сделать шаг">
</body>
</html>

Я хотел бы, чтобы он выглядел так:

Примерно так я его представляю. P.S. Сделал в фотошопе.

Если кто-то знает, как реализовать такое, то, пожалуйста, подскажите. Если же такого на html и javascript сделать нельзя, то прошу сообщить об этом.

Answer 1

Для начала нужно завести элемент, в который будем записывать вывод, пусть это будет span#result-field:

<span id="result-field"></span>

Далее его нужно позиционировать на странице так, чтобы при увеличении он рос вверх, добавим ему обертку, с фиксированной высотой, и расположим его внизу:

<div class="span-wrapper">
  <span id="result-field"></span>
</div>

И стили(вариантов исполнения много, я приведу пример с флексбоксом)

.span-wrapper {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
 }

Далее осталось записывать в спан результат по событию. Для этого используем свойство элемента innerHTML, а вешать на событие будет через EventListener

var count = 0; //Создаем переменную 
 
document.getElementById('btn').addEventListener('click', function(){ 
  var result = document.getElementById('result-field') 
  result.innerHTML += 'test'+count+'<br>' // Достаем ее из замыкания 
  count++ 
})
.span-wrapper { 
  height: 300px; 
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end; 
  }
<div class="span-wrapper"> 
  <span id="result-field"></span> 
</div> 
<button id="btn">click</button>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте hersones.com.ua
ТОП-10
READ ALSO
Angular Страница не отображает значения переменной $scope
HTML

Angular Страница не отображает значения переменной $scope

Такой вопрос:

 206
Картинка и clip-path
CSS

Картинка и clip-path

Помогите обрезать изображение в форме "волны" с помощью clip-pathВнизу пример как хотелось бы

 228
Как сделать прозрачную маску?
CSS

Как сделать прозрачную маску?

Как сделать этот треугольник средствами css? Пробовал через clip и через border, но как-то всё тщетно

 195
Как сверстать такое? [требует правки]
CSS

Как сверстать такое? [требует правки]

 177