Trying to add two value and insert them in HTML as a paragraph

Bizu 0
Viewed 22

I'm currently trying to make this code work properly.

I think the problem is within the two last line of my code, but I don't understand why it doesn't work. Can't I add those two value and just insert the result in my HTML ?

const option1=document.getElementById("checkbox1")
const option2=document.getElementById("checkbox2")
const option3=document.getElementById("checkbox3")
let priceFirstMonth = 19.95;
let priceAnnual = 29.95;
const setPriceMonth = document.querySelector(".firstMonthPrice");

const calculatedPrice = () => {
    /* calculate the amount of all options */
    let addedOptionsPrice;
    if (option1.checked) {
        addedOptionsPrice = addedOptionsPrice+10;
    }
    if (option2.checked) {
        addedOptionsPrice = addedOptionsPrice+5;
    } 
    if (option3.checked) {
        addedOptionsPrice = addedOptionsPrice+10;
    }

    /* add the amount to regular prices*/
    priceFirstMonth = document.createElement('p');
    priceAnnual = document.createElement('p');
    priceFirstMonth.innerHTML = priceFirstMonth + addedOptionsPrice;
    priceAnnual.innerHTML = priceAnnual + addedOptionsPrice;
    setPriceMonth.appendChild(priceFirstMonth);

}

Thanks in advance for any help or explication on my behavior !

javascript
3 Answers

Just rename your variables.

const priceFirstMonthElement = document.createElement('p');
const priceAnnualElement = document.createElement('p');
priceFirstMonthElement.innerHTML = priceFirstMonth + addedOptionsPrice;
priceAnnualElement.innerHTML = priceAnnual + addedOptionsPrice;
setPriceMonth.appendChild(priceFirstMonthElement);

You are just assigning the element to the same variable that is for calculation.

Shri Hari L0 
priceFirstMonth = document.createElement('p');
priceAnnual = document.createElement('p');
priceFirstMonth = priceFirstMonth + addedOptionsPrice;
priceAnnual = priceAnnual + addedOptionsPrice;
setPriceMonth.innerHTML=priceFirstMonth;
Rahul Mohanty0

A cleaner version of your code:

const checkboxElement1 = document.querySelector("#checkbox1");
const checkboxElement2 = document.querySelector("#checkbox2");
const checkboxElement3 = document.querySelector("#checkbox3");
const firstMonthPriceElement = document.querySelector(".firstMonthPrice");
const checkboxElements = document.querySelectorAll(".checkbox");

let basePriceFirstMonth = 19.95;
let basePriceAnnual = 29.95;
let optionnalPrice;

/* calculate the amount of all options */
const priceCalculation = () => {    
    if (option1.checked) {
        optionnalPrice = optionnalPrice + 10;
    }
    if (option2.checked) {
        optionnalPrice = optionnalPrice + 5;
    } 
    if (option3.checked) {
        optionnalPrice = optionnalPrice + 10;
    }
}

checkboxElements.forEach(checkbox => {
  checkbox.addEventListener("click", () => {
    priceCalculation();
  });
});

/* add the amount to regular prices*/
priceFirstMonthElement = document.createElement('p');
priceAnnualElement = document.createElement('p');

priceFirstMonthElement.innerHTML = basePriceFirstMonth + optionnalPrice;
priceAnnualElement.innerHTML = basePriceAnnual + optionnalPrice;

firstMonthPriceElement?.appendChild(priceFirstMonthElement);

Flosrn0
Related