Как я могу динамически добавлять предупреждения начальной загрузки на страницу, используя JavaScript? - PullRequest
Новая
       5

Как я могу динамически добавлять предупреждения начальной загрузки на страницу, используя JavaScript?

0 голосов
/ 19 октября 2019

Я работаю над созданием списка задач, используя Bootstrap. Вот как бы я хотел, чтобы это выглядело . Я создал форму и знаю, как получить доступ к данным в форме.

Чего я не знаю, как это сделать - динамически добавлять предупреждения на страницу с помощью JavaScript при нажатии кнопки отправки. Я хотел бы, чтобы оповещения были частью сетки начальной загрузки и соответственно масштабировались с изменением размера окна.

HTML Я использую ниже с вариацией ответа Шейха на JS. Я думаю, что я должен быть в состоянии выяснить остальное отсюда. 

function myAlert(task, days) {
  const wrapper = document.createElement('div');
  wrapper.innerHTML = 
  `<div class="alert alert-warning alert-dismissible fade show" role="alert">
    ${task}</br>${days}
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
    </div>`;
  document.body.appendChild(wrapper);
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
    <!-- Script to add tasks-->
    <script src=scripts.js></script>

    <title>To-do list</title>
  </head>
  <body>
    <div class="container">

          <h1 style="text-align: center">Todo List</h1>

          <form name="form1" action="" onsubmit="event.preventDefault(); myAlert(document.getElementById('task').value, document.getElementById('days').value)">
              <div class="form-group">
                  <label for="task">Task</label>
                  <input id="task" class="form-control" type="text" name="task" required>
              </div>
              <div class="form-group">
                  <label for="days">Days To Complete</label>
                  <input id="days" class="form-control" type="text" name="task"  required>
              </div>
              <button type="submit" class="btn btn-primary">Submit</button>
          </form>
          <hr/>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

1 Ответ

1 голос
/ 19 октября 2019 
function myAlert(message){
var wrapper = document.createElement("div");
wrapper.innerHTML = '<div class="alert alert-info" role="alert">'+message+'</div>'
document.body.appendChild(wrapper);}

Тогда используйте это так 

myAlert('This is a info alert')
...