JS Button disappear when mouse hovers above it
Question
I am making a button with javascript. When I click on the box that says "click me", it should print the line "now you clicked me". However, when I embedded it in an HTML file and open it with chrome, something went wrong. Initially, the button appears, but when the mouse hovers over it, the entire button disappears. When I click on where the button was, it still prints the line. Here is my code, adapted from khan academy computer science courses on drawing buttons. Also, the code works in khan academy but not when I open it with chrome. Is there any way I can make the button stay on the screen even I hover above it?
<!DOCTYPE html>
<!-- This is based on DillingerLee's great template here:
https://github.com/Team-Code/KA_Offline -->
<html>
<head>
<title>Processing.JS inside Webpages: Template</title>
</head>
<body>
<p align="center">
<!--This draws the Canvas on the webpage -->
<canvas id="mycanvas"></canvas>
</p>
</body>
<!-- Run all the JavaScript stuff -->
<!-- Include the processing.js library -->
<!-- See https://khanacademy.zendesk.com/hc/en-us/articles/202260404-What-parts-of-ProcessingJS-does-Khan-Academy-support- for differences -->
<script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script>
<script>
var sketchProc = function(processingInstance) {
with (processingInstance) {
size(600, 400);
frameRate(30);
/******************
*Button Object Type
*******************/
var Button = function(config) {
this.x = config.x || 0;
this.y = config.y || 0;
this.width = config.width || 80;
this.height = config.height || 50;
this.label = config.label || "Click";
this.color = config.color || color(207, 85, 85);
this.onClick = config.onClick || function() {};
};
//draw the button
Button.prototype.draw = function() {
if (this.isMouseInside() && mouseIsPressed()) {
fill(255, 255, 255);
}
else {
fill(this.color);
}
rectMode(CENTER);
rect(this.x, this.y, this.width, this.height, 5);
fill(0, 0, 0);
textSize(19);
textAlign(CENTER, CENTER);
text(this.label, this.x, this.y);
};
//check if mouse cursor is inside the button
Button.prototype.isMouseInside = function() {
return mouseX > this.x-this.width/2 &&
mouseX < (this.x + this.width/2) &&
mouseY > this.y - this.height/2 &&
mouseY < (this.y + this.height/2);
};
//handle mouse clicks for the button
Button.prototype.handleMouseClick = function() {
if (this.isMouseInside()) {
this.onClick();
}
};
/** create object instances **/
//create button
var btn1 = new Button(
{
x:width/2,
y:height/2,
width : 72,
height : 36,
label : "Click me",
color: color(35, 176, 110),
onClick : function(){
println("Now you clicked me");
}
}
);
draw = function() {
background(98, 122, 54);
//Draw the button
btn1.draw();
};
mouseClicked = function() {
btn1.handleMouseClick();
};
}};
// Get the canvas that Processing-js will use
var canvas = document.getElementById("mycanvas");
// Pass the function sketchProc (defined in myCode.js) to Processing's constructor.
var processingInstance = new Processing(canvas, sketchProc);
</script>
</html>
2 answers
solution1
1 2021-07-14 08:54:31
The code is using a library called Processing. It is a problem in line 42. Instead of mouseIsPressed() , you should use this.mouseIsPressed
if (this.isMouseInside() && this.mouseIsPressed) {
fill(255, 255, 255);
}
With the wrong code, if you open Chrome dev tools (F12), and try to hover above it, you see an error message on the console, says " mouseIsPressed( ) is not a function", because you did not define this function. You should refer to the Button object with the this keyword, then access mouseIsPressed , which looks like to me a build-in Processing variable.
solution2
1 ACCPTED 2021-07-14 09:11:19
When running your code, as you hover over the button, the following error is printed in the browser's console (press F12 and click console to see this): Meaning that something on line 42 of the HTML file throws an error. Let's investigate!
On this line, the following code can be found:
if (this.isMouseInside() && mouseIsPressed())
Apparently, the second part of this if statement is not defined.
Looking into the documentation on the p5.js website ( link ), it looks like mouseIsPressed is a boolean value (true or false) and not a function, and should thus not be invoked using brackets. The following should then work:
if (this.isMouseInside() && mouseIsPressed)
However, at least for me, this still does not work as intended. A similar error is thrown. Looking in the processing.org online documentation, I came across a reference to the mousePressed boolean instead ( link ).
Finally, using this, the code works as intended:
if (this.isMouseInside() && mousePressed)
If I understand it correctly, you can make your own custom functions called mouseIsPressed and mousePressed , which are then called automatically by processing when such an event occurs, but in this case using the boolean is simpler and should suffice.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.