如何使用 javascript 将引导警报动态添加到页面？

Question

我正在使用 Bootstrap 创建一个待办事项列表。 这是我希望它看起来的样子。 我已经创建了表单并且知道如何访问表单中的数据。

我不知道该怎么做是在单击提交按钮后使用 JavaScript 将警报动态添加到页面。 我希望警报成为引导网格的一部分，并通过调整 window 的大小相应地进行缩放。

HTML 我在下面使用谢赫对 JS 的回答的变体。 我想我应该能够从这里找出 rest。

 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>

Answer 1

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')

如何使用 javascript 将引导警报动态添加到页面？

问题描述

1 个解决方案

解决方案1
1 2019-10-18 23:20:43

如何使用 javascript 将引导警报动态添加到页面？

问题描述

1 个解决方案

解决方案1 1 2019-10-18 23:20:43

解决方案1
1 2019-10-18 23:20:43