hi in code down below have html setup buttons password input form:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>log in form</title> <link href="style.css" rel="stylesheet"> <script src="ui.js"></script> </head> <body> <div id="main"> <div id="top_bar"><tx id="tx">bildschirmsperre</tx></div> <div id="infotext">wählen sie ihre pin aus</div><br /> <div id="pin"></div><button id="btnback" onclick="changepin(10)">←</button><br /> <div id="tasten"> <button class="button" onclick="changepin(1)">1</button> <button class="button" onclick="changepin(2)">2</button> <button class="button" onclick="changepin(3)">3</button><br /> <button class="button" onclick="changepin(4)">4</button> <button class="button" onclick="changepin(5)">5</button> <button class="button" onclick="changepin(6)">6</button><br /> <button class="button" onclick="changepin(7)">7</button> <button class="button" onclick="changepin(8)">8</button> <button class="button" onclick="changepin(9)">9</button><br /> <button class="button" onclick="changepin(0)">0</button> </div> <div id="bottom_bar"> <text id="text_left">abbrechen</text> <zeichen id="zeichen">|</zeichen> <text id="text_right">weiter</text> </div> </div> </body> </html> there no css looks awful right , contains words in germany please ignore them.
so far have javascript:
var count = 0; function changepin(value) { var pin = document.getelementbyid("pin"); if(value != 10 && count < 4){ pin.innerhtml += value; count++; }else if(value == 10){ count--; pin.innerhtml = pin.value.substr(0, count); } } the typing in (max 4 letters) works fine have no idea how make backspace tried little bit isnt working.
could pls help?
thanks!
you had it, use of count variable both unnecessary , potentially confusing. need, without it...
// once - no need find element every time var pin = document.getelementbyid("pin"); function changepin(value) { var currentpin = pin.innertext; // if user pressed button remove last character if (value == 10) { pin.innertext = currentpin.substr(0, currentpin.length - 1); } // else if current pin long enough exit without doing else else if (currentpin.length > 3) { return; } // else add new character pin else { pin.innertext = currentpin + value; } } as can see changed innerhtml innertext. in case makes no difference, it's habit refer correct property, want set text, not html.
Comments
Post a Comment