Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
315 views
in Technique[技术] by (71.8m points)

javascript - 在if语句中选择(Select in if-Statement)

I am writing a simple calculator where the result depends on what selector has been chosen and the issue is that it doesn't work because code stops in seconde if statement.

(我正在写一个简单的计算器,其结果取决于选择了哪个选择器,问题是它不起作用,因为代码在seconds if语句中停止。)

I checked the if statement a few times and it has true on the exit иге I'm new in coding and I don't know can I put the callback function into the If-statement or not and perhaps that is why It doesn't work.

(我检查了几次if语句,它在退出时都为true。我是编码新手,我不知道是否可以将回调函数放入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;

        }
    });
```````````````````````````````````````````````````````````````````````````````````````````````````
  ask by Sultan Gedgafov translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

first index of dom button is [0] , and incremental sum pattern is "+=" not "=+"

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...