JavaScript kalkualtor kalorii

Question

Witam,

piszę kalkulator kalorii i utknąłem w takim momencie, że już przy kliknięciu "oblicz" nic się nie dzieje. Szukam błędu już od kilku godzin, może Wam się uda mi pomóc.

var kalkulatorController = (function(){ 

    var kalorie;
    var bmi;
    
    return {
        liczKalorie: function(obj){
            kalorie = obj.age+obj.height+obj.weight;
    },
        
        liczBMI: function(obj){
            bmi = obj.age+obj.height+obj.weight;
    },
        getResult: function(){
            return {
                zapotrzebowanie: kalorie,
                bmi: bmi
            };  
    },
        
    }; 
})();    
    
//****************POBIERANIE DANYCH
var UIController = (function(){
    var DOMstrings = { // obiekt przechowujacy nazwy zmienny klas
        inputAge: '.age',
        inputWeight: '.weight',
        inputHeight: '.height'
    };
    return {
        getInput: function() {
            return {
                age: document.querySelector(DOMstrings.inputAge).value,
                weight: document.querySelector(DOMstrings.inputWeight).value,
                height: document.querySelector(DOMstrings.inputHeight).value
            };
        }
    };
    
})();

//****************REZULTAT
var calculator = (function(kalkCtrl, UICtrl){ 

    
    var setupEventListeners = function() {
        document.getElementById('oblicz').addEventListener("click", addItems);
    };

    
    var addItems = function(){
        
//1. pobierz dane z inputow
        var input;
        input = UICtrl.getInput();
        
//2. policz zapotrzebowanie kaloryczne i BMI
        kalkCtrl.liczKalorie(input);
        kalkCtrl.liczBMI(input);
//3. zapisz wyniki do zmiennych
        var wynikKalorie;
        var wynikBmi;
        wynikKalorie = kalkCtrl.getResult.zapotrzebowanie;
        wynikBmi = kalkCtrl.getResult.bmi;
//4. przekaz wyniki do HTML i wystwietl
        document.getElementById('kalorie').innerHTML = wynikKalorie;
        document.getElementById('bmi').innerHTML = wynikBmi;
    };
    
    return {
        init: function(){
            console.log('start');
            setupEventListeners();
        }
    };
    
})(kalkulatorController, UIController);
    
calculator.init();

 

Tutaj część z html

<div id="wyniki" style="display:block;">
                <div class="row">
                    <h4>Twoje dzienne zapotrzebowanie kaloryczne:</h4>
                </div>
                <div class="row">
                    <div id="kalorie">2500 kcal</div>
                </div>
                <div class="row">
                    <h4>Twoje BMI:</h4>
                </div>
                <div class="row">
                    <div id="bmi">21</div>
                </div>
            </div>

Tutaj formularz kalkulatora

<div class="row">
                    <form method="post" action="#" class="kalkulator-kalorii">
                        <div class="row">
                            <h4>Oblicz dzienne zapotrzebowanie kaloryczne oraz współczynnik BMI</h4>
                        </div>
                        
                        <div class="row">
                            <div class="col span-1-of-3">
                                <label for="plec">Płeć</label>
                            </div>
                            <div class="col span-2-of-3">
                                <label class="radio-container">
                                    <input type="radio" name="radio" id="pleck" > K
                                    <span class="circle"></span>
                                </label>
                                <label class="radio-container">
                                    <input type="radio" name="radio" id="plecm" > M
                                    <span class="circle"></span>
                                </label>
                                
                            </div>
                        </div>
                        <div class="row">
                            <div class="col span-1-of-3">
                                <label for="age">Wiek</label>
                            </div>
                            <div class="col span-1-of-3">
                                <input type="age" name="age" id="wiek" class="age" placeholder="Twój wiek" required>
                            </div>
                            <div class="col span-1-of-3">
                                <label for="age">(18-99)</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col span-1-of-3">
                                <label for="weight">Waga</label>
                            </div>
                            <div class="col span-1-of-3">
                                <input type="weight" name="weight" id="waga" class="weight" placeholder="Twoja waga" required>
                            </div>
                            <div class="col span-1-of-3">
                                <label for="weight">kg</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col span-1-of-3">
                                <label for="height">Wzrost</label>
                            </div>
                            <div class="col span-1-of-3">
                                <input type="height" name="height" id="wzrost" class="height" placeholder="Twój wzrost" required>
                            </div>
                            <div class="col span-1-of-3">
                                <label for="height">cm</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col span-1-of-3">
                                <label for="find-us">Poziom aktywności fizycznej</label>
                            </div>
                            <div class="col span-1-of-3">
                                <select name="aktywnosc" id="aktywnosc">
                                    <option value="friends" selected>Brak aktywności fizycznej</option>
                                    <option value="search">Mała aktywność fizyczna (1-3 ćwiczenia w tygodniu)</option>
                                    <option value="ad">Średnia aktywność fizyczna (4-5 ćwiczenia w tygodniu)</option>
                                    <option value="other">Duża aktywność fizyczna (codzienne ćwiczenia)</option>
                                    <option value="other">Bardzo duża aktywność fizyczna</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col span-1-of-3">
                                <label>&nbsp;</label>
                            </div>
                            <div class="col span-1-of-3">
                                <input type="submit" value="Oblicz" id="oblicz">
                            </div>
                        </div>
                    </form>

                </div>

Z góry dzięki za pomoc

Comments

Sprawdziłeś, czy w konsoli są błędy? W którym miejscu HTML umieściłeś skrypt?

---

Skrypt umieszczony jest przed zamknięciem tagu body.

Prawda, było kilka błędów z atrybutem "for" przy <label>, ale już naprawione. Jednak kod dalej nie działa ;/