Adding dynamic text to WPGive donation form

Hi @matheusfd Thank you for replying to my inquiry! Is there’s a way to modify the code to add text above donation options to display the description after customer tap each options?

Hi

I have already done what I want to achieve. I created a new custom function and I access the CSS class from there. Here’s my sample JS code.

// Get the selected donation amount and update the impact text

function updateImpactText() {

    var selectedAmount = document.querySelector('#give-amount').value;

    selectedAmount = selectedAmount.replace(/,/g, '');

    var impactValue = selectedAmount / 55;

    var weightEquivalent = Math.round(impactValue * 100) / 100;

    var bottleEquivalent = (impactValue * 55).toLocaleString();

    document.querySelector('#selected-value').textContent = selectedAmount;

    document.querySelector('#weight-equivalent').textContent = weightEquivalent;

    document.querySelector('#bottle-equivalent').textContent = bottleEquivalent;

}

window.addEventListener('load',populateImpact);

// Add the input event listener to update the impact text whenever the value changes

document.querySelector('#give-amount').addEventListener('input', updateImpactText);

// give-donation-level-btn give-btn give-btn-level-0 give-default-level

var donationButtons = document.querySelectorAll('.give-donation-level-btn');

for (var i = 0; i < donationButtons.length; i++) {

    var button = donationButtons[i];

    // Exclude the "Custom Amount" button

    if (!button.classList.contains('give-btn-level-custom')) {

    button.addEventListener('click', handleButtonClick);

    }

}

  // Event handler for button click

function handleButtonClick(event) {

    // Get the selected donation amount from the clicked button

    var selectedAmount = event.target.value;

    selectedAmount = selectedAmount.replace(/,/g, '');

    // Update the impact text with the selected amount

    var impactValue = selectedAmount / 55;

    var weightEquivalent = Math.round(impactValue * 100) / 100;

    var bottleEquivalent = (impactValue * 55).toLocaleString();

    document.querySelector('#selected-value').textContent = selectedAmount;

    document.querySelector('#weight-equivalent').textContent = weightEquivalent;

    document.querySelector('#bottle-equivalent').textContent = bottleEquivalent;

}

function populateImpact(){

    document.querySelector('#selected-value').textContent = "0";

    document.querySelector('#weight-equivalent').textContent = '0';

    document.querySelector('#bottle-equivalent').textContent = '0';

}