Javascript-форум - Кодовый замок Javascript

Здравствуйте. есть идея сделать кодовый замок на 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
Заранее спасибо

<!DOCTYPE html> <html> <head> <style> #modal { display: none; } #modal:target { display: block; width: 100vw; height: 100vw; background: lightgrey; } </style> <script> function addTextToInput(anElement) { var text = document.getElementById('number').value; if (text != "") text += ""; text += anElement.innerText; document.getElementById('number').value = text; if(text == localStorage.password){ location.href='#modal'; document.forms.test.hidden = true; } } function setPassword() { if(changepassword.value) { localStorage.password = changepassword.value; window.location.reload(true); } } </script> </head> <body> <form hidden="hidden" name="test"> <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> </form> <div id="modal"> <input id="changepassword" placeholder="введите новый пароль 123"> <button type="button" onclick="setPassword()">Сохранить пароль</button> </div> <script> if('password' in localStorage) { document.forms.test.hidden = false; } else { location.href='#modal' } </script> </body> </html>