Как настроить веб-уведомления? - PullRequest
Новая
       54

Как настроить веб-уведомления?

0 голосов
/ 07 февраля 2020

Я хочу отправлять веб-уведомления со своим собственным входом и решать, когда я его отправлю (например, отправив форму). Я делаю это для неопытных опытных людей, поэтому я ищу простой интерфейс

Я пытаюсь сделать систему веб-уведомлений из формы. Таким образом, я могу решить, когда и какое сообщение будет отображаться в уведомлении. Мой текущий код не работает:

(Примечание. Я уже запросил разрешение на отображение уведомлений!)

Форма 

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

Когда я отправляю форму, я не получить уведомление. Вместо этого он обновляет страницу. Что не так в моем коде или как мне подойти к этому? Любое рабочее (альтернативное, может быть, без формы?) Решение приветствуется!

Это мой первый вопрос. Пожалуйста, скажите мне, если вы не понимаете вопрос или поправьте меня :)

1 Ответ

1 голос
/ 07 февраля 2020

Вам необходимо отключить отправку формы. Более быстрый способ справиться с этим будет изменить эту строку: 

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

Plus: вам нужно изменить img на image в качестве имени переменной. Вот так: var no = new Notification(title, { body: text, icon: img }); Должно быть так: var no = new Notification(title, { body: text, icon: image });

...