如何使用 javascript 将引导警报动态添加到页面？
[英]How can I dynamically add bootstrap alerts to a page using javascript?
问题描述
I'm working on creating a todo list using Bootstrap.
我正在使用 Bootstrap 创建一个待办事项列表。 Here's how I'd like it to look .这是我希望它看起来的样子。 I've created the form and know how to access the data in the form.我已经创建了表单并且知道如何访问表单中的数据。
What I don't know how to do is dynamically add the alerts to the page using JavaScript upon clicking the submit button.我不知道该怎么做是在单击提交按钮后使用 JavaScript 将警报动态添加到页面。 I'd like the alerts to be a part of the bootstrap grid and scale accordingly with resizing the window.我希望警报成为引导网格的一部分，并通过调整 window 的大小相应地进行缩放。
HTML I'm using below with a variation of Sheikh's answer for the JS. HTML 我在下面使用谢赫对 JS 的回答的变体。 I think I should be able to figure out the rest from here.我想我应该能够从这里找出 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">×</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
1 2019-10-18 23:20:43
function myAlert(message){
var wrapper = document.createElement("div");
wrapper.innerHTML = '<div class="alert alert-info" role="alert">'+message+'</div>'
document.body.appendChild(wrapper);}
Then use it like this然后像这样使用它
myAlert('This is a info alert')
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.