probem javascript int

Question

Witam, wie ktos dlaczego zamiast poprawnego wyniku otrzymuje NaN ??? z gory dziekuje

const button = document.querySelector('button');
const koszt = document.querySelector('.koszt');
const pokoje = parseInt(document.querySelector('.pokoje'));
const metraz = parseInt(document.querySelector('.metraz'));
const kafelki = document.querySelector('.kafelki');
let kosztCalkowity = 0;

button.addEventListener('click', () => {
    const kosztPokojow = pokoje * 1000;
    const kosztMetrazu = metraz * 4000;
    
    if(kafelki.checked == true){
        kosztCalkowity = kosztPokojow + kosztMetrazu + 2000;
        koszt.innerHTML = kosztCalkowity;

    }else{
        kosztCalkowity = kosztMetrazu + kosztPokojow;
        koszt.innerHTML = kosztCalkowity;
    }
});

 

Answer 1

Popełniłeś błąd, bo do zmiennych koszt, pokoje, metraż i kafelki załadowałeś elementy DOM, a nie ich zawartości. Zakładając, że są to elementy input, powinieneś zrobić to tak:

const koszt = document.querySelector('.koszt').value;
const pokoje = parseInt(document.querySelector('.pokoje').value);
const metraz = parseInt(document.querySelector('.metraz').value);
const kafelki = document.querySelector('.kafelki').value;

Zobacz sobie w konsoli JavaScript co ci się wyświetli z value i bez. Daj znać czy pomogłem.

Comments

z c

onst koszt = document.querySelector('.koszt').value; usunalem value, bo jest to div do wyswietlania wyniku

i

teraz ponownie zamiast 0 jest NaN

---

No to jak to jest div, to zamiast value będzie innerHTML lub innerText, nie wiem bo podałeś trochę za mało informacji. Pokaż kod html.

---

const button = document.querySelector('button');
const koszt = document.querySelector('.koszt')
const pokoje = document.querySelector('.pokoje');
const metraz = document.querySelector('.metraz');
const kafelki = document.querySelector('.kafelki');
let kosztCalkowity = 0;
 
button.addEventListener('click', () => {
    const kosztPokojow = parseInt(pokoje.innerHTML) * 1000;
    const kosztMetrazu = parseInt(metraz.innerHTML) * 4000;
     
    if(kafelki.checked == true){
        kosztCalkowity = kosztPokojow + kosztMetrazu + 2000;
        koszt.innerHTML = kosztCalkowity;
 
    }else{
        kosztCalkowity = kosztMetrazu + kosztPokojow;
        koszt.innerHTML = kosztCalkowity;
    }
});

Tu masz przykładowe rozwiązanie, ale ja po prostu nie wiem skąd ty bierzesz dane, napisałeś tylko że z diva. Tylko że ja nie wiem co jest w tym divie i skąd się bierze, czy jest wpisane na sztywno, czy pobierane z bazy danych, w jakiej w ogóle jest formie etc.

Answer 2

Spróbuj tak :

Z linij 3 i 4 usuń "parseInt"

linia 9 i 10

Linia 9 i10 
    const kosztPokojow = +pokoje * 1000;
    const kosztMetrazu = +metraz * 4000;
     
lub 

    const kosztPokojow = parseInt(pokoje * 1000);
    const kosztMetrazu = parseInt(metraz * 4000);
     

Daj znać czy pomogło ...

Comments

teraz zamiast NaN dostaje wynik 0 za kazdym razem...

Answer 3

const koszt = document.querySelector('.koszt');
const pokoje = parseInt(document.querySelector('.pokoje'));
const metraz = parseInt(document.querySelector('.metraz'));
const kafelki = document.querySelector('.kafelki');
let kosztCalkowity = 0;
 
button.addEventListener('click', () => {
    const kosztPokojow = +pokoje.value * 1000;
    const kosztMetrazu = +metraz.value * 4000;
     
    if(kafelki.checked == true){
        kosztCalkowity = kosztPokojow + kosztMetrazu + 2000;
        koszt.innerHTML = kosztCalkowity;
 
    }else{
        kosztCalkowity = kosztMetrazu + kosztPokojow;
        koszt.innerHTML = kosztCalkowity;
    }
});

Jeśli to nie pomoże to daj więcej Info czyli Html'a !

Comments

oczywiscie popełnilem błąd i w liniach 2 i 3  ma nie być parseInt.

przepraszam