Как мне сбросить числа после расчета итогов - PullRequest
Новая
       1

Как мне сбросить числа после расчета итогов

0 голосов
/ 19 февраля 2020

Как очистить итог после первого расчета? Я хочу сбросить его, если я добавлю новый элемент после первого расчета. Прямо сейчас он добавляет его к предыдущему. Например, для первого вычисления (item1 + item2) = итого, если я добавлю еще один элемент, оно становится (item1 + item2) + (item1 + item2 + item3) = total

Что мне нужно, так это сбросить и рассчитать новый итог с добавленным новым элементом. 

 var count = 0;
    var tax = 0.05;
    var taxFeild = document.getElementById("Tax");
    var checkBoxes = document.getElementById("checkBoxes");
    var checks=document.querySelectorAll('.items');
    var ItemTotal=document.getElementById('ItemTotal');
    var Total=document.getElementById('TotalWithTax');
    var btn = document.getElementById("btn");


function Calculate()
      {
       
       for(var i =0 ;i< checks.length;i++)
         {
           if(checks[i].checked)
             {
               count+=parseFloat(checks[i].value);
             }
         }
        ItemTotal.textContent += count;
        taxFeild.textContent += (parseFloat(tax*count).toFixed(2));
        Total.textContent += ((tax*count) + count).toFixed(2);
      }

        btn.addEventListener('click',Calculate);
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">

 
</head>
<body>

<h2 class="first-heading">Assignment 1</h2>
<div class="row">
  <div class="column">
      <div id="checkBoxes">
            <input type="checkbox" class="items" value='7.99'>Fried Chicken ($7.99)<br>
            <input type="checkbox" class="items" value='9.99'> Fried Halibut ($9.99)<br>
            <input type="checkbox" class="items" value='7.99'> Hamburger ($7.99)<br>  
            <input type="checkbox" class="items" value='12.99'> Grilled salmon($12.99)<br>
            <input type="checkbox" class="items" value='5.99'> Side salad ($5.99)<br>       
            <button id="btn">Calculate</button>  
        </div>
  </div>
  <div class="column" >
         
        <div id="Sums">
                <p id="ItemTotal"> Item Total: </p>
                <p id="Tax"> Tax: </p>
                <p id="TotalWithTax">Total with Tax: </p>      
        </div>
  </div>
</div>
<script src="java.js"></script>
 
</body>
</html>

Ответы [ 4 ]

3 голосов
/ 19 февраля 2020

Вы должны:

  • Объявить переменную count внутри Calculate, чтобы она начиналась с 0 при каждом нажатии кнопки
  • Вместо += для полей ItemTotal, TotalWithTax, et c создайте внутренний элемент, которому вы вместо этого назначаете текст. Так, например, вместо 
<p id="ItemTotal"> Item Total: </p>

используйте: 

<p> Item Total: <span id="ItemTotal"></span></p>

Таким образом, при каждом нажатии кнопки вы можете просто назначить перезапись ItemTotal что бы там ни было раньше. 

var tax = 0.05;
var taxFeild = document.getElementById("Tax");
var checkBoxes = document.getElementById("checkBoxes");
var checks = document.querySelectorAll('.items');
var ItemTotal = document.getElementById('ItemTotal');
var Total = document.getElementById('TotalWithTax');
var btn = document.getElementById("btn");


function Calculate() {
  let count = 0;
  for (var i = 0; i < checks.length; i++) {
    if (checks[i].checked) {
      count += parseFloat(checks[i].value);
    }
  }
  ItemTotal.textContent = count;
  taxFeild.textContent = (parseFloat(tax * count).toFixed(2));
  Total.textContent = ((tax * count) + count).toFixed(2);
}

btn.addEventListener('click', Calculate);
<h2 class="first-heading">Assignment 1</h2>
<div class="row">
  <div class="column">
    <div id="checkBoxes">
      <input type="checkbox" class="items" value='7.99'>Fried Chicken ($7.99)<br>
      <input type="checkbox" class="items" value='9.99'> Fried Halibut ($9.99)<br>
      <input type="checkbox" class="items" value='7.99'> Hamburger ($7.99)<br>
      <input type="checkbox" class="items" value='12.99'> Grilled salmon($12.99)<br>
      <input type="checkbox" class="items" value='5.99'> Side salad ($5.99)<br>
      <button id="btn">Calculate</button>
    </div>
  </div>
  <div class="column">

    <div id="Sums">
      <p> Item Total: <span id="ItemTotal"></span></p>
      <p> Tax: <span id="Tax"></span></p>
      <p>Total with Tax: <span id="TotalWithTax"></span></p>
    </div>
  </div>
</div>

Вы можете также рассмотреть возможность окружения input s <label> s, чтобы сделать их более интерактивными: 

var taxRate = 0.05;

var checks = document.querySelectorAll('.items');
var subtotalSpan = document.getElementById('ItemTotal');
var taxSpan = document.getElementById("Tax");
var totalSpan = document.getElementById('TotalWithTax');

function Calculate() {
  let subtotal = 0;
  for (var i = 0; i < checks.length; i++) {
    if (checks[i].checked) {
      subtotal += parseFloat(checks[i].value);
    }
  }
  const tax = taxRate * subtotal;
  const total = tax + subtotal;
  
  subtotalSpan.textContent = subtotal;
  taxSpan.textContent = tax.toFixed(2);
  totalSpan.textContent = total.toFixed(2);
}

var btn = document.getElementById("btn");
btn.addEventListener('click', Calculate);
#checkBoxes > label {
  cursor: pointer;
}
<h2 class="first-heading">Assignment 1</h2>
<div class="row">
  <div class="column">
    <div id="checkBoxes">
      <label><input type="checkbox" class="items" value='7.99'>Fried Chicken ($7.99)</label><br>
      <label><input type="checkbox" class="items" value='9.99'> Fried Halibut ($9.99)</label><br>
      <label><input type="checkbox" class="items" value='7.99'> Hamburger ($7.99)</label><br>
      <label><input type="checkbox" class="items" value='12.99'> Grilled salmon($12.99)</label><br>
      <label><input type="checkbox" class="items" value='5.99'> Side salad ($5.99)</label><br>
      <button id="btn">Calculate</button>
    </div>
  </div>
  <div class="column">
    <div id="Sums">
      <p> Item Total: <span id="ItemTotal"></span></p>
      <p> Tax: <span id="Tax"></span></p>
      <p>Total with Tax: <span id="TotalWithTax"></span></p>
    </div>
  </div>
</div>
1 голос
/ 19 февраля 2020

Вы можете использовать событие onblur на своей кнопке калькулятора. Событие onblur наступает при щелчке объекта. После того, как пользователь нажимает кнопку «Рассчитать», когда он щелкает где-либо еще, вызывается функция onblur.

Подробнее о событии onblur можно узнать по адресу: https://www.w3schools.com/jsref/event_onblur.asp

В W3Schools много простой для изучения информации. Вот другие события, которые могут оказаться полезными в будущем (или для расширения этого проекта): https://www.w3schools.com/jsref/dom_obj_event.asp

Простая функция сброса может сбросить ваш счетчик и ваши теги абзаца. 

var count = 0;
var tax = 0.05;
var taxFeild = document.getElementById("Tax");
var checkBoxes = document.getElementById("checkBoxes");
var checks=document.querySelectorAll('.items');
var ItemTotal=document.getElementById('ItemTotal');
var Total=document.getElementById('TotalWithTax');
var btn = document.getElementById("btn");

// RESET YOUR CALCULATOR FIELDS & COUNT
function resetCalc(){
 count = 0; 
 ItemTotal.textContent = "Item Total: ";
 taxFeild.textContent = "Tax: ";
 Total.textContent = "Total with Tax: ";
}
 
function Calculate()
  {
   
   for(var i =0 ;i< checks.length;i++)
     {
       if(checks[i].checked)
         {
           count+=parseFloat(checks[i].value);
         }
     }
    ItemTotal.textContent += count;
    taxFeild.textContent += (parseFloat(tax*count).toFixed(2));
    Total.textContent += ((tax*count) + count).toFixed(2);
  }

    btn.addEventListener('click',Calculate);

 
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
 
  
</head>
<body>

<h2 class="first-heading">Assignment 1</h2>
<div class="row">
  <div class="column">
     <div id="checkBoxes">
        <input type="checkbox" class="items" value='7.99'>Fried Chicken ($7.99)<br>
        <input type="checkbox" class="items" value='9.99'> Fried Halibut ($9.99)<br>
        <input type="checkbox" class="items" value='7.99'> Hamburger ($7.99)<br>  
        <input type="checkbox" class="items" value='12.99'> Grilled salmon($12.99)<br>
        <input type="checkbox" class="items" value='5.99'> Side salad ($5.99)<br>      
 
   <!-- NOTICE THE ONBLUR -->
        <button id="btn" onblur="resetCalc();">Calculate</button>  

    </div>
   </div>
   <div class="column" >
     
    <div id="Sums">
            <p id="ItemTotal"> Item Total: </p>
            <p id="Tax"> Tax: </p>
            <p id="TotalWithTax">Total with Tax: </p>       
    </div>
  </div> 
</div>
<script src="java.js"></script>
 
</body>
</html>
0 голосов
/ 19 февраля 2020

Вы можете добавить count = 0; в первой строке function Calculate() { .... }, чтобы при каждом изменении списка вы получали новую сумму.

Для обновления поля и сохранения содержимого в целости. 

const taxValue = tax * count;
total = taxValue + count;

ItemTotal.innerText = "Item Total:" + count;
taxFeild.innerText = "Tax:" + (parseFloat(taxValue).toFixed(2));
Total.innerText = "Total with Tax:" + (parseFloat(total).toFixed(2));
0 голосов
/ 19 февраля 2020

Проблема, кажется, знак плюс при назначении контента. Просто замените + = на =, и он должен работать 

    ItemTotal.textContent = count;
    taxFeild.textContent = (parseFloat(tax*count).toFixed(2));
    Total.textContent = ((tax*count) + count).toFixed(2);

И поместите подписи в span следующим образом: 

<p> Item Total:<span id="ItemTotal"></span> </p>
<p> Tax: <span id="Tax"></span></p>
<p>Total with Tax: <span id="TotalWithTax"></span></p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...