javascript - 在 if 语句中选择

Question

我正在编写一个简单的计算器，其结果取决于所选择的选择器，问题是它不起作用，因为代码在 seconde if 语句中停止。我检查了几次 if 语句，它在退出时为真 иге 我是编码新手，我不知道我是否可以将回调函数放入 If 语句中，也许这就是为什么它不工作。

<strike><div class="section"> 
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-8 text-center">
          <h2 class="mb-4 section-title">Calculator</h2>
        </div>
        <div class="calculator">
          <div class="stri area">
            <div class="stri_text area_text">Type of material</div>
            <div class="stri_input area_input"><select><option value="matt">Matt</option><option value="glossy">Glossy</option><option value="satin">Satin</option><option value="Тканевый">Тканевый</option></select></div>  
          </div>
          <div class="stri material">
            <div class="stri_text material_text">Area of a ceiling</div>
            <div class="stri_input material_input"><input class="expenses-item"></div>  
          </div>
          <div class="stri angles">
            <div class="stri_text anglesl_text">Number of corners</div>
            <div class="stri_input angles_input"><input class="expenses-item"></div>  
          </div>
          <div class="stri chandelier">
            <div class="stri_text chandelier_text">Number chandeliers</div>
            <div class="stri_input chandelier_input"><input class="expenses-item"></div>  
          </div>
          <div class="stri light">
            <div class="stri_text light_text">Number of spotlights</div>
            <div class="stri_input light_input"><input class="expenses-item"></div>  
          </div>
          <div class="stri pipe">
            <div class="stri_text pipe_text">Bypassing of pipes</div>
            <div class="stri_input pipe_input"><input class="expenses-item"></div>  
          </div>
          <div class="result_btn">
            <button class="btn btn-lg">Рассчитать</button>
          </div> 
          <div class="result">
            <div class="stri_text result_text">TOTAL:</div>
            <div class="result_num preserve-whitespace" id="result-item">&nbsp</div>
          </div>
        </div>
      </div>
    </div>
  </div></strike>

    'use strict';

    let selectSelector = document.getElementsByTagName('select'),
        optionsSelector = document.getElementsByTagName('option'),
        expensesItem = document.getElementsByClassName('expenses-item'),
        resultItem = document.getElementById('result-item'),
        expensesBtn = document.getElementsByTagName('button')[1]; 

    let sum;


    expensesBtn.addEventListener('click', function () {
        if (isNaN(expensesItem[0].value) || isNaN(expensesItem[1].value) || isNaN(expensesItem[2].value) || isNaN(expensesItem[3].value) || isNaN(expensesItem[4].value)) {

            resultItem.textContent = "Введите числовые данные ..."; 

            } else if (selectSelector.addEventListener('select', function () {
                optionsSelector[0].value == "mat";
                })) {

                sum = +expensesItem[0].value + +expensesItem[1].value + +expensesItem[2].value + +expensesItem[3].value + +expensesItem[4].value;
                resultItem.textContent = sum;

        }
    });
```````````````````````````````````````````````````````````````````````````````````````````````````

Answer 1

dom按钮的第一个索引是[0]，增量和模式是“+=”而不是“=+”

    'use strict';

        let selectSelector = document.getElementsByTagName('select'),
        optionsSelector = document.getElementsByTagName('option'),
        expensesItem = document.getElementsByClassName('expenses-item'),
        resultItem = document.getElementById('resultitem'),
        expensesBtn = document.getElementsByTagName('button')[0];

    let sum=0;


        expensesBtn.addEventListener('click', function () {
            debugger;
        if (isNaN(expensesItem[0].value) || isNaN(expensesItem[1].value) || isNaN(expensesItem[2].value) || isNaN(expensesItem[3].value) || isNaN(expensesItem[4].value)) {

            resultItem.value = "Введите числовые данные ...";

        } else  {

            sum += parseInt(expensesItem[0].value) + parseInt(expensesItem[1].value) + parseInt(expensesItem[2].value) + parseInt(expensesItem[3].value) + parseInt(expensesItem[4].value);
            //alert(sum)
            resultItem.innerText = sum;

        }
    });

    <strike>
        <div class="section">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-8 text-center">
                        <h2 class="mb-4 section-title">Calculator</h2>
                    </div>
                    <div class="calculator">
                        <div class="stri area">
                            <div class="stri_text area_text">Type of material</div>
                            <div class="stri_input area_input"><select id="rdselect"><option value="matt">Matt</option><option value="glossy">Glossy</option><option value="satin">Satin</option><option value="Тканевый">Тканевый</option></select></div>
                        </div>
                        <div class="stri material">
                            <div class="stri_text material_text">Area of a ceiling</div>
                            <div class="stri_input material_input"><input class="expenses-item"></div>
                        </div>
                        <div class="stri angles">
                            <div class="stri_text anglesl_text">Number of corners</div>
                            <div class="stri_input angles_input"><input class="expenses-item"></div>
                        </div>
                        <div class="stri chandelier">
                            <div class="stri_text chandelier_text">Number chandeliers</div>
                            <div class="stri_input chandelier_input"><input class="expenses-item"></div>
                        </div>
                        <div class="stri light">
                            <div class="stri_text light_text">Number of spotlights</div>
                            <div class="stri_input light_input"><input class="expenses-item"></div>
                        </div>
                        <div class="stri pipe">
                            <div class="stri_text pipe_text">Bypassing of pipes</div>
                            <div class="stri_input pipe_input"><input class="expenses-item"></div>
                        </div>
                        <div class="result_btn">
                            <button id="btn" type="button" class="btn btn-lg">Рассчитать</button>
                        </div>
                        <div class="result">
                            <div class="stri_text result_text">TOTAL:</div>
                            <div class="result_num preserve-whitespace" id="resultitem">&nbsp</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </strike>