Solved

Onclick event does not seem to register in the Debut template

snowflake
Visitor
3 0 0

Dear all,

I am having a bit of a problem with the debut template, I have designed the following piece of code (as a form of a header):

				<div class="fullscreen-video-wrap
							fullscreen-video-wrap--{{ section.settings.height }}
							fullscreen-video-wrap--{{ section.id }}">
					<video class="video-js" autoplay preload playsinline muted
						poster="https:{{ section.settings.image | img_url: 'master' }} controlsList="nofullscreen">
						<source src="{{ section.settings.newvideo_link }}" type="video/mp4">
						</source>
					</video>
				</div>

 

However, if I try to do the following 

					<video class="video-js" autoplay preload playsinline muted
						poster="https:{{ section.settings.image | img_url: 'master' }} controlsList="nofullscreen" onclick="alert("I am an alert box!");">

 

I cannot make the alert box appear, it seems that the onclick event is "hijacked" by something else. I am wondering how I can still make the onclick alert work.

 

Any ideas?

 

Thanks

Accepted Solution (1)
Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

I'm not entirely sure why that's not working, but it looks like all that is getting loaded in after the DOM through javascript or something, so that may be the case. You can add an event listener to the container for that video instead. Add this at the end of your theme.js file, there's a bit at the end of your file already that's throwing an error, you need to comment it out with double slashes at the beginning of the line. I'll include it here just so you can see the line, but just add the colored code in the snippet below that:

 

// this is your broken code, just add two slashes before it and it'll go light grey and comment it out
// $(window).on("resize", $.debounce(500, headerSize));


//then add this code underneath it.
document.addEventListener('DOMContentLoaded', function(){

let video = document.querySelector('div[data-section-id="1622579860237a54d2"]');

video.addEventListener('click', function(){

alert('I am an alert box');

})

})

 

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

View solution in original post

Replies 5 (5)

Ninthony
Shopify Partner
2329 350 1023

Looks like you're just adding it wrong, you should be using single quotes inside the alert function, you're using double quotes so it's exiting the string and re-entering after the message:

onclick="alert("I am an alert box!");"

// should be 

onclick="alert('I am an alert box!')"
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
snowflake
Visitor
3 0 0

It has been pointed out to me that it should be:

 

					<video class="video-js" autoplay preload playsinline muted
						poster="https:{{ section.settings.image | img_url: 'master' }}" controlsList="nofullscreen" onclick="alert('I am an alert box!');">

 

Unfortunately, it still fails.

Ninthony
Shopify Partner
2329 350 1023

Can you share a URL so we can take a look and see what's going on? I made a codepen the other day just to make sure it works on video elements and it was working for me.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
snowflake
Visitor
3 0 0

Of course: https://goodwave-b-v.myshopify.com/

The password to enter on the website is: whohrt

Please inspect the video or click on it to get the alert, but I did not receive the alert :(.

Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

I'm not entirely sure why that's not working, but it looks like all that is getting loaded in after the DOM through javascript or something, so that may be the case. You can add an event listener to the container for that video instead. Add this at the end of your theme.js file, there's a bit at the end of your file already that's throwing an error, you need to comment it out with double slashes at the beginning of the line. I'll include it here just so you can see the line, but just add the colored code in the snippet below that:

 

// this is your broken code, just add two slashes before it and it'll go light grey and comment it out
// $(window).on("resize", $.debounce(500, headerSize));


//then add this code underneath it.
document.addEventListener('DOMContentLoaded', function(){

let video = document.querySelector('div[data-section-id="1622579860237a54d2"]');

video.addEventListener('click', function(){

alert('I am an alert box');

})

})

 

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄