Menu
I am trainee front end developer and I am working on some demo.
It is working for onclick mouse event but it is not working for both onclick and onmouseover. I need an onclick option and also an onclick + mouseover option.
Here is my html file:
<html>
<head>
<link rel="stylesheet" type="text/css" href="MyStyle.css">
<script src="myScript.js"></script>
<title>Main page</title>
</head>
<body onload="init()">
<canvas id="can" height="100" width="100"></canvas>
<br />
<input id="btn" type="button" value=" + " onclick="incr()">
<input id="btn" type="button" value=" - " onclick="decr()">
<select id="hundred" onchange="setHundred()">
<option value=0> 0 </option>
<option value=100> 100 </option>
<option value=-100> -100 </option>
</select>
</body>
</html>
Here is my Javascript file:
var can, ctx, hun, n = 0;
function init() {
can = document.getElementById("can");
ctx = can.getContext("2d");
hun = document.getElementById("hundred");
showN();
}
function showN() {
ctx.fillStyle = "rgb(64, 255, 64)";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "24pt Helvetica";
ctx.clearRect(0, 0, can.width, can.height, 99);
ctx.fillText(n, can.width / 2, can.height / 2);
}
function incr() {
n++;
showN();
}
function decr() {
n--;
showN();
}
function setHundred() {
n = hun.value;
showN();
}
and the css file:
#btn, #hundred {
font: larger bold;
border-radius: 25px;
}
canvas {
background-color: black;
border: 1px solid rgb(64, 255, 64);
border-radius: 25px;
}
My question is:
how I use onclick and both onclick and onmouseover for
+&-?Also it would increment if click pressed
Thank you.
560
By all means, do you mean this kind of implementation? where onclick and mouseover have the same approach?
(Updated code below) I understand now your question, for that case I am using onmousedown and onmouseup + interval implementation.
Please check below:
var can, ctx, hun, n = 0;
var timer = null;
function init() {
can = document.getElementById("can");
ctx = can.getContext("2d");
hun = document.getElementById("hundred");
showN();
}
function showN() {
ctx.fillStyle = "rgb(64, 255, 64)";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "24pt Helvetica";
ctx.clearRect(0, 0, can.width, can.height, 99);
ctx.fillText(n, can.width / 2, can.height / 2);
}
function incr() {
n++;
showN();
}
function decr() {
n--;
showN();
}
function setHundred() {
n = hun.value;
showN();
}
function setTimer(type) {
timer = setInterval(function() {
if (type == 'incr') {
incr();
} else {
decr();
}
}, 200);
}
function removeTimer() {
clearInterval(timer);
}#btn, #hundred {
font: larger bold;
border-radius: 25px;
}
canvas {
background-color: black;
border: 1px solid rgb(64, 255, 64);
border-radius: 25px;
}<body onload="init()">
<canvas id="can" height="100" width="100"></canvas>
<br>
<input id="btnAdd" type="button" value=" + " onclick="incr()" onmousedown="setTimer('incr')" onmouseup="removeTimer()">
<input id="btnDeduct" type="button" value=" - " onclick="decr()" onmousedown="setTimer('decr')" onmouseup="removeTimer()">
<select id="hundred" onchange="setHundred()">
<option value=0> 0 </option>
<option value=100> 100 </option>
<option value=-100> -100 </option>
</select>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
