I have created a drop down menu with custom radio buttons on the menu, some of the buttons label have images and some do not have. I create a function the when a radio button is selected its label will be display on the dropdown wrapper with its image. It works with the radio buttons with images on the label but not on the ones without.
here is the code.
<div id="dropdown-wrapper" class="dropdown-wrapper" tabindex="1">
<span>View Additional Shipping Options or Select a Carrier</span>
<ul class="dropdown-list">
<li>
<div class="radio-group">
<label class="custom-radio">
<input type="radio" name="option" value="">
<span class="radio-dot"></span>
<span class="custom-radio-label">$2.99 - Free or Standard Shipping</span>
</label>
</div>
<div class="radio-group">
<label class="custom-radio">
<input type="radio" name="option" value="">
<span class="radio-dot"></span>
<span class="custom-radio-label">$14.99 - Expedited Shipping</span>
</label>
</div>
<div class="radio-group">
<label class="custom-radio">
<input type="radio" name="option" value="">
<span class="radio-dot"></span>
<span class="custom-radio-label">$34.99 - International Shipping</span>
</label>
</div>
</li>
<li>
<p>Best Discounted Delivery Options to your Destination</p>
<div class="radio-group">
<label class="custom-radio">
<input type="radio" name="option" value="">
<span class="radio-dot"></span>
<span class="custom-radio-label"><span><img src="https://placehold.co/22x18" alt=""></span>$8.89 - UPS SurePost 'Saver' (Typical Delivery: 5-8 Days to 78738)</span>
</label>
</div>
<div class="radio-group">
<label class="custom-radio">
<input type="radio" name="option" value="">
<span class="radio-dot"></span>
<span class="custom-radio-label"><span><img src="https://placehold.co/22x18" alt=""></span>$15.85 - UPS Ground Service (Typical Delivery: 3 Days to 78738)</span>
</label>
</div>
<div class="radio-group">
<label class="custom-radio">
<input type="radio" name="option" value="">
<span class="radio-dot"></span>
<span class="custom-radio-label"><span><img src="https://placehold.co/22x18" alt=""></span>$15.95 - UPS 2 Day Delivery</span>
</label>
</div>
<div class="radio-group">
<label class="custom-radio">
<input type="radio" name="option" value="">
<span class="radio-dot"></span>
<span class="custom-radio-label"><span><img src="https://placehold.co/22x18" alt=""></span>$36.99 - UPS Nex Day Air</span>
</label>
</div>
</li>
<li>
<p>Ground Options (Delivery Typically 7 business days or less after order ships)</p>
<div class="radio-group">
<label class="custom-radio">
<input type="radio" name="option" value="">
<span class="radio-dot"></span>
<span class="custom-radio-label"><span><img src="https://placehold.co/22x18" alt=""></span>$36.68 - FedEx Home Delivery (Typical Delivery: 3-4 Days to 78738)</span>
</label>
</div>
</li>
</ul>
</div>
document.addEventListener('DOMContentLoaded', function() {
const dropdownWrapper = document.getElementById('dropdown-wrapper');
const radioButtons = dropdownWrapper.querySelectorAll('.dropdown-list input[type="radio"]');
const spanElement = dropdownWrapper.querySelector('span');
function handleRadioButtonSelection(event) {
const selectedRadioButton = event.target;
console.log(selectedRadioButton);
if (selectedRadioButton.checked) {
const nextSibling = selectedRadioButton.querySelector('.custom-radio-label');
const labelElement = nextSibling.nextElementSibling;
const label = labelElement ? labelElement.textContent : null;
const imageSrc = labelElement ? labelElement.querySelector('img').src : null;
spanElement.innerHTML = `${imageSrc ? `<img src="${imageSrc}" alt="">` : ''} ${label ? label.trim() : ''}`;
}
}
// Adding event listeners to the radio buttons
radioButtons.forEach(radioButton => {
radioButton.addEventListener('change', handleRadioButtonSelection);
});
});
I want it to work even on the labels without images.