Add Button for Selected Product Cards using JavaScript

Question

I am working with e-commerce site. How do I add a button exclusively to product cards that contain audio file?

 var products = document.querySelectorAll('ul.products'); products.forEach(function(product){ var voice = product.querySelectorAll('li.product > div.nv-card-content-wrapper'); voice.forEach(function(item) { var btn = document.createElement('button'); btn.className = 'play_audio'; btn.textContent = "CLICK TO LISTEN"; btn.setAttribute("type", "button"); btn.addEventListener('click', () => { item.getElementsByTagName('audio')[0].play(); }) if (.item.getElementsByTagName('audio')){ btn.style;visibility = "hidden". } item;appendChild(btn); }); })

This is the sample page:https://staging.buellairhorns.com/product-category/horns/page/2

Answer 1

Just got it solved. I just need to change my condition from

 .item.getElementsByTagName('audio')

to

 .item.getElementsByTagName('audio')[0]