If a field is empty (doesn\'t have any value), do something with plain Javascript

• straktormedia

• December 7, 2021 at 1:56 pm

I would like to have an H2 title “VIDEOS” and below that the results of the ACF field for every WooCommerce product.
If one product doesn’t have any videos, i want to hide this H2 title (probably by adding a {display:none;} class.
I want to do that using plain Javascript.
Thanks in advance.

• John Huebner

• December 7, 2021 at 4:59 pm

Why would you want to do this using JavaScript.

I am assuming that you are conditionally showing the videos in PHP. Correct me if I’m wrong, but if this is the case then you could more easily conditionally show the H2 in PHP as well.

• straktormedia

• December 7, 2021 at 6:09 pm

I don’t mind using PHP, i am just not familiar with the language.
Could you provide me with a code snippet?

I am imagining something like this in JS:

if( field_name = ‘ ‘){
document.querySelector(‘.video–title’).classList.add(‘hidden’)
}

———-
CSS

.hidden {
display:none;}

———–

For the JS part, I don’t know how to implement that the field returns nothing. Probably the way i wrote the code is wrong.

I would appreciate your help, even in PHP.

• John Huebner

• December 8, 2021 at 8:57 am

I do not know what types of fields you are using, so it is very hard to give code. The basic idea is

if (condition to check for videos) {
  // output heading field
  // output videos
}

• straktormedia

• December 8, 2021 at 11:29 am

Let’s say it’s a video field. Or an image field. Or a Wysiwyg editor. I actually have all of them, but my main concern is how to implement in code that the field might be empty. PHP or JS. I don’t mind.

The screenshot will help.

Thanks for your time.

Untitled.png.png

• John Huebner

• December 8, 2021 at 2:36 pm

<?php 
if (get_field('video')) {
  ?>
    <h2>Videos</h3>
  <?php 
  the_field('video');
}
?>