Здравствуйте. есть идея сделать кодовый замок на JS:
<!DOCTYPE html>
<html>
<head>
<script>
function addTextToInput(anElement) {
var text = document.getElementById('number').value;
if (text != "")
text += "";
text += anElement.innerText;
document.getElementById('number').value = text;
}
</script>
</head>
<body>
<form>
<input id="number" disabled>
<br/>
<button type="button" onclick="addTextToInput(this)">1</button>
<button type="button" onclick="addTextToInput(this)">2</button>
<button type="button" onclick="addTextToInput(this)">3</button>
<br>
<button type="button" onclick="addTextToInput(this)">4</button>
<button type="button" onclick="addTextToInput(this)">5</button>
<button type="button" onclick="addTextToInput(this)">6</button>
<br>
<button type="button" onclick="addTextToInput(this)">7</button>
<button type="button" onclick="addTextToInput(this)">8</button>
<button type="button" onclick="addTextToInput(this)">9</button>
<br>
<input type="reset" value="x">
<button type="button" onclick="addTextToInput(this)">0</button>
<button type="button" onclick="location.href='#modal'">></button>
</form>
<div id="modal">
<input id="changepassword" placeholder="введите новый пароль"><button type="button" onclick="location.href='#'">Сохранить пароль</button>
</div>
<style>
#modal {
display: none;
}
#modal:target {
display: block;
width: 100vw;
height: 100vw;
background: lightgrey;
}
</style>
</body>
</html>
Проблема заключается в том, что я не знаю как:
-сделать первоначальный пароль (шаблон) для #number и как сохранив значение #changepassword в localStorage подставить для #number
Заранее спасибо