All geek questions in one place

Mulitiple mouseevent used at a time in javascript

I am a beginner interface developer and I am working on some demos.
It works for the onclick event, but it does not work for both onclick and onmouseover . I need the onclick option as well as the 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 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 do i use onclick and both onclick and onmouseover for + and - ?

It will also increase when pressed.

Thanks.

+5
source share
2 answers

By all means, do you mean such an implementation? where onclick and mouseover have the same approach?

(Updated code below) Now I understand your question, in this case I use 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>
+3
source

I do not know where you are adding the event.

if you want to add event input

first step. change id

 <input id="btnIncr" type="button" value=" + " onclick="incr()">

second step. add script MouseEvent code in init function

 document.getElementById("btnIncr").addEventListener("mouseover", incr());

I hope this feature will work!

0
source

Source: https://habr.com/ru/post/1275501/

More articles:


All Articles