CODEWITHSUNDEEP
javascript
yasser Eltibili
yasser Eltibili

Reputation: 134

the for loop on the select options is not working

I am trying to make a loop on select options but it is not working. The code is working on the first element only but not working on others. In other options they give the same result as the first one. What can I do to make the loop work on the options? I want to edit the for loop not the whole code.

var billAmount = document.getElementById('bill-amount'),
  serviceQuality = document.getElementById('quality'),
  serviceQualityList = Array.from(document.querySelectorAll('#quality option')),
  serviceQualityListLength = serviceQualityList.length,
  pepoleServing = document.getElementById('pepole'),
  calculate = document.getElementById('calculate'),
  tips = document.getElementById('tips');

calculate.onclick = function() {
  var serviceQualityListText = serviceQualityList.text,
    serviceQualityListLength = serviceQualityList.length,
    billAmountValue = billAmount.value,
    pepoleServingValue = pepoleServing.value;
  for (var i = 0; i < serviceQualityListLength; i++) {
    if (serviceQualityListText = "Exellent") {
      tips.textContent = (billAmountValue / 40) * pepoleServingValue;
    } else if (serviceQualityListText = "Very Good") {
      tips.textContent = (billAmountValue / 60) * pepoleServingValue;
    } else if (serviceQualityListText = "Good") {
      tips.textContent = (billAmountValue / 70) * pepoleServingValue;
    } else if (serviceQualityListText = "Not Good") {
      tips.textContent = (billAmountValue / 75) * pepoleServingValue;
    } else {
      tips.textContent = (billAmountValue * 0) * pepoleServingValue;
    }
  }
};
<div class="tip-calculator">
  <div class="claculator-header">
    <h2 class="claculator-title">Calculate Your Tip</h2>
  </div>
  <div class="bill-amount-container">
    <span class="pound-sign">£</span>
    <input id="bill-amount" type="text" placeholder="How Much is your bill?">
  </div>
  <div class="service-quality">
    <span>Choose The Quality Of The Service</span>
    <select id="quality">
      <option class="quality-selector">Exellent</option>
      <option class="quality-selector">Very Good</option>
      <option class="quality-selector">Good</option>
      <option class="quality-selector">Not Good</option>
      <option class="quality-selector">Bad</option>
    </select>
  </div>
  <div class="number-of-pepole">
    <span class="number">Number Of Serving Peplole</span>
    <input type="text" id="pepole" placeholder="How Many Pepole Serving You?">
  </div>
  <div class="do">
    <button id="calculate">calculate</button>
  </div>

  <div class="result">
    <span>Your Tips Equal</span>
    <div id="tips">..........</div>
    <span>£</span>
  </div>

</div>

Upvotes: 0

Views: 203

Answers (1)

WebMarie
WebMarie

Reputation: 176

Your if statements are assigning values instead of checking them, use == or === istead of =. Try:

for (var i = 0; i < serviceQualityListLength; i++) {
    if (serviceQualityListText == "Exellent") {
      tips.textContent = (billAmountValue / 40) * pepoleServingValue;
    } else if (serviceQualityListText == "Very Good") {
      tips.textContent = (billAmountValue / 60) * pepoleServingValue;
    } else if (serviceQualityListText == "Good") {
      tips.textContent = (billAmountValue / 70) * pepoleServingValue;
    } else if (serviceQualityListText == "Not Good") {
      tips.textContent = (billAmountValue / 75) * pepoleServingValue;
    } else {
      tips.textContent = (billAmountValue * 0) * pepoleServingValue;
    }
  }

Upvotes: 1

Related Questions