如何自定义网络通知?

Question

我想用我自己的输入发送网络通知，并决定何时发送(例如提交表单(。我正在为非编码经验的人制作这个，所以我正在寻找一个简单的界面

我正在尝试从表单制作网络通知系统。这样，我可以决定何时以及显示什么消息通知。我当前的代码不起作用：

(注意：我已经请求允许显示通知！

形式

<form id='form' >
<label for='userInput' class='alert-title'>Notifications</label><br>
<div class='lijn3'></div>
<label for='userInput'>Make a new notification</label><br>
<label for='userInput'>Title</label><br>
<input  type='text' id='userInput' /><br>
<label for='userText'>Text</label><br>
<input  type='text' id='userText' /><br>
<input  type='submit' onclick='createNotification();' />
</form>
<script>
function createNotification() {
var title = document.getElementById("userInput").value;
var text = document.getElementById("userText").value;
var image = '/style/afbeeldingen/profielfoto.png';
console.log(title,text)
var no = new Notification(title, { body: text, icon: img });
}
</script>

提交表单时，我没有收到通知。相反，它正在刷新页面。 我的代码中出了什么问题，或者我应该如何处理？欢迎任何有效的(替代方案，也许没有表格？(解决方案！

这是我的第一个问题。如果您不理解问题或纠正我，请告诉我：(

Answer 1

您需要禁用表单提交。处理此问题的更快方法是更改此行：

<input  type='submit' onclick='createNotification();' />

对此：

<input  type='button' onclick='createNotification();' />

片段：

function createNotification() {
var title = document.getElementById("userInput").value;
var text = document.getElementById("userText").value;
var image = '/style/afbeeldingen/profielfoto.png';
console.log(title,text)
var no = new Notification(title, { body: text, icon: image });
}

<form id='form' >
<label for='userInput' class='alert-title'>Notifications</label><br>
<div class='lijn3'></div>
<label for='userInput'>Make a new notification</label><br>
<label for='userInput'>Title</label><br>
<input  type='text' id='userInput' /><br>
<label for='userText'>Text</label><br>
<input  type='text' id='userText' /><br>
<input  type='button' onclick='createNotification();' />
</form>

加： 您需要将img更改为image作为变量名称。所以这个：var no = new Notification(title, { body: text, icon: img });应该是这个：var no = new Notification(title, { body: text, icon: image });