为什么我只返回空值？

Question

当我运行程序为空时，我回来了......我不能再盯着这个了。我似乎找不到错误...有人可以给个提示吗... 问题是我只返回空值：/

// 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

你在这部分犯了错误导致了它

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

你看你写了document.querySelector(DOMelemek.inputErtek.value)但应该是document.querySelector(DOMelemek.inputErtek).value

.value 需要在 )

之后

为什么我只返回空值？

Why do I only get null values back?

javascript

null

为什么我只返回空值？

Why do I only get null values ​back?

javascript

null

Why do I only get null values back?