Cannot click button in HTML?

Question

So I have a page in HTML which has a background based on the well-known particle library. I have a button and there is a problem with it: it can be seen but it cannot be clicked. I tried changing the size and the alignment of the background but cannot make it to work... How to make the button clickable?

My code:
HTML:

<div id="particles-js" ><canvas class="particles-js-canvas" width="500" height="1000"></canvas></div> <button type="button" class="btn btn-info" onclick="alert('hello')">Info</button>

CSS:

body { background: #212121; } .particles-js-canvas{ width: 100%; height: 100%; position: fixed; left: 0px; right: 0px; }

And the Javascript code to initialize the particles:

$(window).on('load', function() { particlesJS("particles-js", { "particles": { "number": { "value": 400, "density": { "enable": true, "value_area": 400 } }, "color": { "value": "#ffffff" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 4 }, "image": { "src": "http://wiki.lexisnexis.com/academic/images/f/fb/Itunes_podcast_icon_300.jpg", "width": 100, "height": 100 } }, "opacity": { "value": 0.5, "random": true, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 2, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": false, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1 }, "move": { "enable": true, "speed": 1, "direction": "bottom", "random": false, "straight": true, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": false, "mode": "grab" }, "onclick": { "enable": false, "mode": "repulse" }, "resize": true }, "modes": { "grab": { "distance": 200, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3 }, "repulse": { "distance": 200, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true }); });

you're missing a ';' when the alert command ends at alert('hello') — Guy Louzon
– Guy Louzon, Commented Sep 17, 2018 at 17:34
Please, provide a snippet or jsFiddle where we can see and try your code. minimal reproducible example — Calvin Nunes
– Calvin Nunes, Commented Sep 17, 2018 at 17:39

Csa77 · Accepted Answer · 2018-09-17 17:44:31Z

Even if you can see your button, that does not mean that the button is in the foreground. Actually, the canvas is hiding your button. You can try adding a z-index to the background:

body { background: #212121; } .particles-js-canvas{ width: 100%; height: 100%; position: fixed; left: 0px; right: 0px; z-index: -1; }

this works, I thought that it is harder to solve the problem...thank you

Anduel · Accepted Answer · 2018-09-17 17:40:04Z

As i understand, this is what you need.

<button type="button" class="btn btn-info" onclick="alert('hello'); setLocation('https://example.com');">Info</button>

Sumanth Rao · Accepted Answer · 2018-09-17 17:41:52Z

The problem is that you are using a canvas inside a div tag. This canvas hides access to the button and acts as a layer on top of it.

Add this to the CSS code and it takes care of the rest.

canvas{ z-index:-1; }

brk · Accepted Answer · 2018-09-17 17:42:18Z

If you are looking to show an alert add javascript before alert. Also note inline javascript is not a good practice.Rather you should create a function and avoid using alert as function name since it is window reserved method

<div id="particles-js"> <canvas class="particles-js-canvas" width="100" height="100"></canvas> </div> <button type="button" class="btn btn-info" onclick="javascript:alert('hello')">Info</button>

dj.cowan · Accepted Answer · 2019-02-08 04:18:44Z

We are using particles.js canvas as an overlay element. Altering the z-index order in this case doesn't help. If the on hover, on click, ie. 'grab, repulse, bubbles' interactivity features of particles.js are not required – It's possible to disable pointer events on the canvas via css, this will allow a user to click through the canvas and interact with underlying elements.

canvas.particles-js-canvas-el { pointer-events: none; }

Collectives™ on Stack Overflow

Cannot click button in HTML?

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Related