0

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

Help is really appreciated TIA

This is phtml file code

<?php
$productId  = $block->getCurrentProduct()->getId();
$productPriceDecimal  = $block->getCurrentProduct()->getPrice();
$productPrice = number_format((float)$productPriceDecimal, 2, '.', '');
$attributeData = $block->getCurrentProduct()->getData('allow_investment');
$profitRate1 = $block->getCurrentProduct()->getData('profit_rate');
$profitRate2 = $block->getCurrentProduct()->getData('profit_rate_2_years');
$profitRate3 = $block->getCurrentProduct()->getData('profit_rate_3_years');
$profitRate4 = $block->getCurrentProduct()->getData('profit_rate_4_years');
$profitRate5 = $block->getCurrentProduct()->getData('profit_rate_5_years');
if ($attributeData == 1) {
?>
<div class="container" style="background-color:#f4f4f4;">
    <div style="float:left; width:45%; padding-right:50px; margin-bottom:50px;">
        <h2><b>Investment Calculator</b></h2>
        <p>Investment calculator to evaluate various investment situations and find out corresponding schedules while considering starting and ending balance</p>
        <div class="field">
        <label class="label" for="investment_calc"><h3>Investment Amount</h3></label>
        <div class="control">
        <input name="investment_calc" id="investment_calc" title="Investment Amount" class="input-text" type="text" value="<?php echo ($productPrice); ?>" data-validate="{required:true}" readonly>
        </div>
        </div>
        <h3>Investment Term (Months):</h3>
        <div class="form-group">
        <input id="1" type="radio" class="months" value="<?php echo $profitRate1 ?>" name="rdmonths"/><span>12</span>
        <input id="2" type="radio" class="months" value="<?php echo $profitRate2 ?>" name="rdmonths"/><span>24</span>
        <input id="3" type="radio" class="months" value="<?php echo $profitRate3 ?>" name="rdmonths"/><span>36</span>
        <input id="4" type="radio" class="months" value="<?php echo $profitRate4 ?>" name="rdmonths"/><span>48</span>
        <input id="5" type="radio" class="months" value="<?php echo $profitRate5 ?>" checked="checked" name="rdmonths"/><span>60</span>
        </div>
    </div>
    <div style="float:right; width:45%; margin-bottom:50px;">
        <h2><b>Representative</b></h2>
        <p>Total Amount:<span id="total-amount" style="margin-left:30px;"></span>
    </div>
</div>
<?php
}
?>

<script type="text/x-magento-init">
        {
            "*": {
                    "myscript": {
                        "principal": "<?php echo $productPrice; ?>"
                    }
                }
        }
</script>

This is js 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('domReady',()=>{
                document.querySelectorAll('input[type="radio"][name="rdmonths"]').forEach(input=>{
                    input.addEventListener('click', myscript )
                })
            })
    return myscript;
});
0

Just change my js file

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));
          });
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.