如何自定义网络通知？

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 });