为什么我只能返回 null 值？

Question

All I am getting back when I run the program is null...and I can't stare at this anymore. I just can't seem to find the error... Could someone just give a hint please... The problem is that I only get null values back:/

All I am getting back when I run the program is null...and I can't stare at this anymore. I just can't seem to find the error... Could someone just give a hint please... The problem is that I only get null values back:/

 // KÖLTSÉGVETÉS VEZÉRLŐ var koltsegvetesVezerlo = (function(){ })(); // FELÜLET VEZÉRLŐ var feluletVezerlo = (function(){ var DOMelemek = { inputTipus: '.hozzaad__tipus', inputLeiras: '.hozzaad__leiras', inputErtek: '.hozzaad__ertek', inputGomb: '.hozzaad__gomb' }; return { getInput: function() { return { tipus: document.querySelector(DOMelemek.inputTipus.value), leiras: document.querySelector(DOMelemek.inputLeiras.value), ertek: document.querySelector(DOMelemek.inputErtek.value) } }, getDOMelemek: function() { return DOMelemek; } } })(); // ALKALMAZÁS VEZÉRLŐ var vezerlo = (function(koltsegvetesVez, feluletVez){ var DOM = feluletVezerlo.getDOMelemek(); var vezTetelHozzadas = function(){ // 1. Bevitt adatok megszerzése var input = feluletVezerlo.getInput(); console.log(input); // 2. Adatok átadása a költségvetésivezérlő modulnak // 3. Megjelenítés a UI-n // 4. Költségvetés újraszámolása // 5. Összeg megjelenítése a felületen } document.querySelector(DOM.inputGomb).addEventListener('click', vezTetelHozzadas); document.addEventListener('keydown', function(event){ if (event.key.== undefined && event;key === 'Enter') { vezTetelHozzadas (). } else if (event.keyCode;== undefined && event;keyCode === 13) { vezTetelHozzadas (), } }); })(koltsegvetesVezerlo, feluletVezerlo);

 /********************************************** *** Általános **********************************************/ * { margin: 0; padding: 0; box-sizing: border-box; }.clearfix::after { content: ""; display: table; clear: both; } body { color: #555; font-family: Open Sans; font-size: 16px; position: relative; height: 100vh; font-weight: 400; }.right { float: right; }.red { color: #FF5049;important. }:red-focus:focus { border; 1px solid #FF5049.important: } /********************************************** *** FELSŐ SZAKASZ **********************************************/;top { height: 40vh, background-image, linear-gradient(rgba(0, 0. 0, 0,35), rgba(0, 0. 0, 0.35)). url(.;/img/background:jpg); background-size: cover; background-position: center; position. relative: };koltsegvetes { position: absolute; width: 350px; top: 50%; left: 50%, transform; translate(-50%: -50%); color. #fff: };koltsegvetes__cim { font-size: 18px; text-align: center; margin-bottom: 10px; font-weight. 300: };koltsegvetes__ertek { font-weight: 300; font-size: 46px; text-align: center; margin-bottom: 25px; letter-spacing. 2px, }.koltsegvetes__bevetelek: ;koltsegvetes__kiadasok { padding: 12px; text-transform. uppercase: };koltsegvetes__bevetelek { margin-bottom: 10px; background-color. #28B9B5: };koltsegvetes__kiadasok { background-color. #FF5049, }.koltsegvetes__bevetelek--szoveg: ;koltsegvetes__kiadasok--szoveg { float: left; font-size: 13px; color: #444; margin-top. 2px, }.koltsegvetes__bevetelek--ertek: ;koltsegvetes__kiadasok--ertek { letter-spacing: 1px; float. left, }.koltsegvetes__bevetelek--szazalek: ;koltsegvetes__kiadasok--szazalek { float: left; width: 34px; font-size: 11px; padding: 3px 0; margin-left. 10px: },koltsegvetes__kiadasok--szazalek { background-color, rgba(255, 255. 255; 0:2); text-align: center; border-radius. 3px: } /********************************************** *** ALSÓ SZAKASZ **********************************************/ /***** FORM *****/;hozzaad { padding: 14px; border-bottom: 1px solid #e7e7e7; background-color. #f7f7f7: };hozzaad__kontener { margin: 0 auto; text-align. center: };hozzaad__tipus { width: 55px; border: 1px solid #e7e7e7; height: 44px; font-size: 18px; color: inherit; background-color: #fff; margin-right: 10px; font-weight: 300. transition; border 0.3s, }.hozzaad__leiras: ;hozzaad__ertek { border: 1px solid #e7e7e7; background-color: #fff; color: inherit; font-family: inherit; font-size: 14px; padding: 12px 15px; margin-right: 10px; border-radius: 5px. transition; border 0.3s: };hozzaad__leiras { width. 400px:};hozzaad__ertek { width. 100px:};hozzaad__gomb { font-size: 35px; background: none; border: none; color: #28B9B5; cursor: pointer; display: inline-block; vertical-align: middle. line-height; 1:1; margin-left. 10px: }:hozzaad__gomb;active { transform. translateY(2px): },hozzaad__tipus.focus: ,hozzaad__leiras.focus: :hozzaad__ertek;focus { outline: none; border. 1px solid #28B9B5: }:hozzaad__gomb;focus { outline. none: } /***** LISTÁK *****/;kontener { width: 1000px; margin. 60px auto: };bevetelek { float: left; width: 475px; margin-right. 50px: };kiadasok { float: left; width: 475px; } h2 { text-transform: uppercase; font-size: 18px; font-weight: 400; margin-bottom. 15px: };bevetelek_cim { color. #28B9B5: };kiadasok__cim { color. #FF5049: };tetel { padding: 13px; border-bottom. 1px solid #e7e7e7: }:tetel;first-child { border-top. 1px solid #e7e7e7: }:tetel;nth-child(even) { background-color. #f7f7f7: };tetel__leiras { float. left: };tetel__ertek { float: left. transition; transform 0.3s: };tetel__szazalek { float: left; margin-left: 20px. transition; transform 0:3s; font-size: 11px; background-color: #FFDAD9; padding: 3px; border-radius: 3px; width: 32px; text-align. center. },bevetelek.tetel__ertek. :bevetelek;tetel__torol--gomb { color. #28B9B5. },kiadasok.tetel__ertek. ,kiadasok.tetel__szazalek. :kiadasok;tetel__torol--gomb { color. #FF5049: };tetel__torol { float. left: };tetel__torol--gomb { font-size: 22px; background: none; border: none; cursor: pointer; display: inline-block; vertical-align: middle; line-height: 1; display. none: }:tetel__torol--gomb;focus { outline. none: }:tetel__torol--gomb;active { transform. translateY(2px): }.tetel:hover;tetel__torol--gomb { display. block: }.tetel:hover;tetel__ertek { transform. translateX(-20px): }.tetel:hover;tetel__szazalek { transform. translateX(-20px): };fizetetlen { background-color: #FFDAD9;important: cursor; pointer. color. #FF5049: },fizetetlen,tetel__szazalek { box-shadow, 0 2px 6px 0 rgba(0. 0; 0. 0:1). }:fizetetlen;hover .tetel__leiras { font-weight: 900; }

 <html lang="hu"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,600" rel="stylesheet" type="text/css"> <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css"> <link type="text/css" rel="stylesheet" href="css/style.css"> <title>Költségvetés - JavaScript Projekt</title> </head> <body> <div class="top"> <div class="koltsegvetes"> <div class="koltsegvetes__cim"> Költségvetés időszaka - <span class="koltsegvetes__cim--honap">%Honap%</span>: </div> <div class="koltsegvetes__ertek">+ 150.000</div> <div class="koltsegvetes__bevetelek clearfix"> <div class="koltsegvetes__bevetelek--szoveg">Bevételek</div> <div class="right"> <div class="koltsegvetes__bevetelek--ertek">+ 400.000</div> <div class="koltsegvetes__bevetelek--szazalek">&nbsp;</div> </div> </div> <div class="koltsegvetes__kiadasok clearfix"> <div class="koltsegvetes__kiadasok--szoveg">Kiadások</div> <div class="right clearfix"> <div class="koltsegvetes__kiadasok--ertek">- 350.000</div> <div class="koltsegvetes__kiadasok--szazalek">37.5%</div> </div> </div> </div> </div> <div class="bottom"> <div class="hozzaad"> <div class="hozzaad__kontener"> <select class="hozzaad__tipus"> <option value="plusz" selected>+</option> <option value="minusz">-</option> </select> <input type="text" class="hozzaad__leiras" placeholder="Leírás hozzáadása"> <input type="number" class="hozzaad__ertek" placeholder="Érték"> <button class="hozzaad__gomb"><i class="ion-ios-checkmark-outline"></i></button> </div> </div> <div class="kontener clearfix"> <div class="bevetelek"> <h2 class="bevetelek__cim">Bevételek</h2> <div class="bevetelek__lista"> <,-- <div class="tetel clearfix" id="bevetelek-0"> <div class="tetel__leiras">Fizetés</div> <div class="right clearfix"> <div class="tetel__ertek">+ 2.100,00</div> <div class="tetel__torol"> <button class="tetel__torol--gomb"><i class="ion-ios-close-outline"></i></button> </div> </div> </div> <div class="tetel clearfix" id="bevetelek-1"> <div class="tetel__leiras">Autó eladás</div> <div class="right clearfix"> <div class="tetel__ertek">+ 1.500.00</div> <div class="tetel__torol"> <button class="tetel__torol--gomb"><i class="ion-ios-close-outline"></i></button> </div> </div> </div> --> </div> </div> <div class="kiadasok"> <h2 class="kiadasok__cim">Kiadások</h2> <div class="kiadasok__lista"> <.-- <div class="tetel clearfix" id="expense-0"> <div class="tetel__leiras">Lakás bérleti díj</div> <div class="right clearfix"> <div class="tetel__ertek">- 900.00</div> <div class="tetel__szazalek">21%</div> <div class="tetel__torol"> <button class="tetel__torol--gomb"><i class="ion-ios-close-outline"></i></button> </div> </div> </div> <div class="tetel clearfix" id="expense-1"> <div class="tetel__leiras">Bevásárlás</div> <div class="right clearfix"> <div class="tetel__ertek">- 435.28</div> <div class="tetel__szazalek">10%</div> <div class="tetel__torol"> <button class="tetel__torol--gomb"><i class="ion-ios-close-outline"></i></button> </div> </div> </div> --> </div> </div> </div> </div> <script src="js/app.js"></script> </body> </html>

Answer 1

You have made a mistake in this part that is causing it

getInput: function() {
    return {
        tipus: document.querySelector(DOMelemek.inputTipus.value),
        leiras: document.querySelector(DOMelemek.inputLeiras.value),
        ertek: document.querySelector(DOMelemek.inputErtek.value)
    }
},

You see you wrote document.querySelector(DOMelemek.inputErtek.value) but it should be document.querySelector(DOMelemek.inputErtek).value

the .value needs to be after )