Javascript:: addEventListener on change 单选按钮无法使用 requirejs

Question

Requirejs addEventListener on change radio button not working in magento

Here everything works fine just one issue is there, it doesn't the value and id of input radio fields, So I think addEventListener DOMContentLoaded is not working here.

Help is really appreciated TIA

This is js file code

define([
    "jquery",
    "domReady!"
], function($){
    "use strict";
        const myscript=function(){
            const profit = document.querySelector('input[name="rdmonths"]:checked').value;
            const id = document.querySelector('input[name="rdmonths"]:checked').id;
            const principal = document.querySelector('input[name="investment_calc"]').value;
            const time = id;
            const rate = profit/100;
            const n = 1;
        
            const compoundInterest = (p, t, r, n) => {
               const amount = p * (Math.pow((1 + (r / n)), t));
               return amount;
            };
        
            document.getElementById("total-amount").innerHTML = (compoundInterest(principal, time, rate, n).toFixed(2));   
            console.log(compoundInterest(principal, time, rate, n).toFixed(2));
        }
        
        document.addEventListener('DOMContentLoaded',()=>{
            document.querySelectorAll('input[type="radio"][name="rdmonths"]').forEach(input=>{
                input.addEventListener('click', myscript )
            })
        })

    return myscript;
});

Answer 1

Just add click function for change of radio button

define([
    "jquery",
    "domReady!"
], function($){
    "use strict";
    return function myscript()
    {
        const profit = document.querySelector('input[name="rdmonths"]:checked').value;
            const id = document.querySelector('input[name="rdmonths"]:checked').id;
            const principal = document.querySelector('input[name="investment_calc"]').value;
            const time = id;
            const rate = profit/100;
            const n = 1;
        
            const compoundInterest = (p, t, r, n) => {
               const amount = p * (Math.pow((1 + (r / n)), t));
               return amount;
            };
            document.getElementById("total-amount").innerHTML = (compoundInterest(principal, time, rate, n).toFixed(2));               
        jQuery(".months").click(function(){
            const profit = document.querySelector('input[name="rdmonths"]:checked').value;
            const id = document.querySelector('input[name="rdmonths"]:checked').id;
            const principal = document.querySelector('input[name="investment_calc"]').value;
            const time = id;
            const rate = profit/100;
            const n = 1;
        
            const compoundInterest = (p, t, r, n) => {
               const amount = p * (Math.pow((1 + (r / n)), t));
               return amount;
            };
            document.getElementById("total-amount").innerHTML = (compoundInterest(principal, time, rate, n).toFixed(2));
          });
    }
});