Друзья, добрый день.
Помогите, пожалуйста, исправить алгоритм: мой веб-сайт должен проверить, не ввел ли пользователь ник. Если он это сделал, то веб-сайт должен показать имя, если нет, попросите ввести его. Если пользователь решил изменить его, он нажмет «reset».
После нажатия кнопки «reset» обновляется содержимое элемента c id = "nickName"
. И по нажатию на обновленной кнопке "Set new name1" обновляется вся страница, а не этот элемент, как это задумано - не отрабатывается событие, описанное в строчках document.querySelector('#new-task').onsubmit = () => {
(я думаю, что и в условие if (
программа "не заходит").
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var formNewName = '<form id="new-task"> <input id="nickN" autocomplete="off" autofocus placeholder="Write your nick" type="text"> <input id="submitname" type="submit" value="Set new name1"> </form>';
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#setnewname').onsubmit = () => {
var newname;
localStorage.setItem('localN', newname);
document.querySelector('#nickName').innerHTML = formNewName;
// Stop form from submitting
return false;
};
});
// Checking does user entered his name
if ( !localStorage.getItem('localN') || localStorage.getItem('localN')=="undefined" )
{ var nick;
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#nickName').innerHTML = formNewName;
document.querySelector('#new-task').onsubmit = () => {
nick = document.querySelector('#nickN').value;
localStorage.setItem('localN', nick);
document.querySelector('#nickName').innerHTML = "Your nick is: <b>" + localStorage.getItem('localN') + '</b>';
// Stop form from submitting
return false;
};
});
}
else
{
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#nickName').innerHTML = "Your nick is: <b>" + localStorage.getItem('localN') + '</b>';
});
}
</script>
</head>
<body>
<div id = "nickName"></div>
<div id = "newname">
<br>
<form id="setnewname">
<input id="submitreset" type="submit" value="Reset nick name">
</form>
</div>
</body>
Подскажите где ошибка?