Skip to content

Instantly share code, notes, and snippets.

@tonetheman

tonetheman/wl.html

Created February 6, 2020 23:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tonetheman/d7a3a9da968c3d59e41561985c902792 to your computer and use it in GitHub Desktop.
Save tonetheman/d7a3a9da968c3d59e41561985c902792 to your computer and use it in GitHub Desktop.
Download ZIP
html to handle number controls
Raw
wl.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="user-scalable=no, width=device-width" />
<style>
input {
border : 3px solid black;
padding : 2px;
background: rgba(124, 121, 121, 0.5);
font-size: 32px;
text-align: center;
}
.ctl {
user-select: none;
margin : 0px 0px 0px 4px;
font-size: 32px;
}
.container {
display : flex;
flex-direction: row;
}
.child {
width: 64px;
}
</style>
</head>
<body>
<div class="container">
<div class="child">
<div id="up3" class="ctl">&#9650;</div>
<input type="text" id="digit3" value="0" maxlength="1" size="1">
<div id="down3" class="ctl">&#9660;</div>
</div>
<div class="child">
<div id="up2" class="ctl">&#9650;</div>
<input type="text" id="digit2" value="0" maxlength="1" size="1">
<div id="down2" class="ctl">&#9660;</div>
</div>
<div class="child">
<div id="up1" class="ctl">&#9650;</div>
<input type="text" id="digit1" value="0" maxlength="1" size="1">
<div id="down1" class="ctl">&#9660;</div>
</div>
</div>
<script>
function add_listeners(digitId,upId,downId) {
let digit = document.querySelector(digitId);
let tmp = document.querySelector(upId);
if (tmp) {
let e = tmp;
e.addEventListener("click",function(){
let v = parseInt(digit.value);
v = (v + 1)%10;
digit.value = v;
});
}
tmp = document.querySelector(downId);
if (tmp) {
let e = tmp;
e.addEventListener("click",function(){
let v = parseInt(digit.value);
v = v - 1;
if (v==-1) v = 9;
digit.value = v;
});
}
}
function main() {
add_listeners("#digit3","#up3","#down3");
add_listeners("#digit2","#up2","#down2");
add_listeners("#digit1","#up1","#down1");
}
window.onload = main;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment