Как добавить итоговые значения и отобразить их в текстовом поле

При попытке получить всплывающее сообщение, я не могу его получить. Над этим кодом в моем .js-файле находятся флажки переключения; все это работает на данный момент, но добавление их вместе и приведение итогов в поле txtTotal - единственное, с чем я борюсь.Как добавить итоговые значения и отобразить их в текстовом поле

var total; 
    var outputArea; 
    var btnCompute; 
    function ToggleBurgers() { 
var checkbox = document.getElementById('chkBurgers'); 
var burgers = document.getElementById('divBurgers'); 

if (checkbox.checked) { 
    burgers.style.visibility = 'visible'; 
} else { 
    burgers.style.visibility = 'hidden'; 
} 
} 
function ToggleFries(){ 
var checkbox = document.getElementById('chkFries'); 
var fries = document.getElementById('divFries'); 

if (checkbox.checked) { 
    fries.style.visibility = 'visible'; 
} else { 
    fries.style.visibility = 'hidden'; 
} 
} 

function ToggleDrinks(){ 
var checkbox = document.getElementById('chkDrinks') 
var drinks = document.getElementById('divDrinks'); 

if (checkbox.checked) { 
    drinks.style.visibility = 'visible'; 
    }else { 
    drinks.style.visibility = 'hidden'; 
    } 
} 


    function ComputeTotal() { 
    var total = 0; 
    var burgers = document.getElementById('divBurgers'); 
    var fries = document.getElementById('divFries'); 
    var drinks = document.getElementById('divDrinks'); 
    var radBurgerRegular = document.getElementById('radBurgerRegular'); 
    var radBurgerCheese = document.getElementById('radBurgerCheese'); 
    var radBurgerBacon = document.getElementById('radBurgerBacon'); 
    var radBurgerBaconCheese = document.getElementById('radBurgerBaconCheese'); 
    var radFriesSmall = document.getElementById('radFriesSmall'); 
    var radFriesMedium = document.getElementById('radFriesMedium'); 
    var radFriesLarge = document.getElementById('radFriesLarge'); 
    var radDrinkSoda = document.getElementById('radDrinkSoda'); 
    var radDrinkWater = document.getElementById('radDrinkWater'); 
    var outputArea = document.getElementById('txtTotal'); 
    outputArea.innerHTML = total + divBurgers + divFries + divDrinks; 

    if (burgers.checked){ 
    if (radBurgerRegular.checked){ 
    total = total + radBurgerRegular; 
    }if (radBurgerCheese.checked){ 
    total = total + radBurgerCheese; 
    }if (radBurgerBacon.checked){ 
    total = total + radBurgerBacon; 
    }if (radBurgerBaconCheese.checked){ 
    total = total + radBurgerBaconCheese; 
    } 
    }else if (fries.checked){ 
    if (radFriesSmall.checked){ 
     total = total + radFriesSmall; 
    }if (radFriesMedium.checked){ 
     total = total + radFriesMedium; 
    }if (radFriesSmall.checked){ 
     total = total + radFriesLarge; 
    } 
    } else if (drinks.checked){ 
    if (radDrinkSoda.checked){ 
     total = total + radDrinkSoda; 
    }if (radDrinkWater.checked){ 
     total = total + radDrinkWater; 
     } 
    } 


} 


function init() { 
    var chkBurgers = document.getElementById('chkBurgers'); 
    chkBurgers.onchange = ToggleBurgers; 

    var chkFries = document.getElementById('chkFries'); 
    chkFries.onchange = ToggleFries; 

    var chkDrinks = document.getElementById('chkDrinks'); 
    chkDrinks.onchange = ToggleDrinks; 

    var btnCompute = document.getElementById('btnCompute'); 
    btnCompute.onclick = ComputeTotal; 

    var outputArea = document.getElementById('txtTotal'); 
    outputArea.innerHTML = total 
} 

window.onload = init;

HTML код здесь

<!DOCTYPE html> 
<html> 
<head> 
<title>Restaurant Menu</title> 
</head> 
<body> 
<div class="page"> 
    <div class="topbar"> 
     Menu 
    </div> 
    <div class="row"> 

     <!--Burgers CheckBox--> 
     <div class="cell"> 
      <input type="checkbox" name="chkBurgers" id="chkBurgers" />  <label for="chkBurgers">Burgers</label> 
     </div> 

     <!--Cell Containing Burger Menu--> 
     <div class="cell" id="divBurgers" style="visibility:hidden;"> 
      <input type="radio" name="radBurgers" id="radBurgerRegular" /><label for="radBurgerRegular">Regular (4.19)</label><br /> 
      <input type="radio" name="radBurgers" id="radBurgerCheese" /><label for="radBurgerCheese">w/ Cheese (4.79)</label><br /> 
      <input type="radio" name="radBurgers" id="radBurgerBacon" /><label for="radBurgerBacon">w/ Bacon (4.79)</label><br /> 
      <input type="radio" name="radBurgers" id="radBurgerBaconCheese" /><label for="radBurgerBaconCheese">w/ Bacon and Cheese (5.39)</label><br /> 
     </div> 
    </div> 
    <div class="clear"></div> 
    <div class="row"> 

     <!--Fries CheckBox--> 
     <div class="cell"> 
      <input type="checkbox" name="chkFries" id="chkFries" /><label for="chkFries">Fries</label> 
     </div> 

     <!--Cell Containing Fries Menu--> 
     <div class="cell" id="divFries" style="visibility:hidden;"> 
      <input type="radio" name="radFries" id="radFriesSmall" /><label for="radFriesSmall">Small (2.39)</label><br /> 
      <input type="radio" name="radFries" id="radFriesMedium" /><label for="radFriesMedium">Medium (3.09)</label><br /> 
      <input type="radio" name="radFries" id="radFriesLarge" /><label for="radFriesSmall">Large (4.99)</label><br /> 
     </div> 
    </div> 
    <div class="clear"></div> 
    <div class="row"> 

     <!--Drinks CheckBox--> 
     <div class="cell"> 
      <input type="checkbox" name="chkDrinks" id="chkDrinks" /><label for="chkDrinks">Drinks</label> 
     </div> 

     <!--Cell Containing Drink Menu--> 
     <div class="cell" id="divDrinks" style="visibility:hidden;"> 
      <input type="radio" name="radDrinks" id="radDrinkSoda" /><label for="radDrinkSoda">Soda (1.69)</label><br /> 
      <input type="radio" name="radDrinks" id="radDrinkWater" /><label for="radDrinkWater">Bottled Water (1.49)</label><br /> 
     </div> 

     <!--Cell Containing Compute Button and Total Field--> 
     <div class="cell" style="float:right;"> 
      Total Meal Cost: <input type="text" name="txtTotal" id="txtTotal" /><br /><br /> 
      <button id="btnCompute" name="btnCompute">Compute Total</button> 
     </div> 
    </div> 
    <div class="clear"></div> 
</div> 
<link rel="stylesheet" type="text/css" href="Chapter9.css"> 
<script src="Chapter9.js"></script> 
</body> 
</html>

источник

2015-12-03 J. Bush

что вы имеете в виду под «вы не можете получить его»? неверно ли значение? Я вижу несколько потенциальных ошибок, но вам нужна дополнительная информация. также, пожалуйста, добавьте код HTML – thedarklord47

, было бы полезно добавить как полный код HTML, так и .js? –

да пожалуйста. недостаточно информации еще – thedarklord47

прежде всего, вы хотите, чтобы избавиться от else-х в блоке, где вы проверяете, если вещи проверяются. что только позволяет получить Burger или Fries или напиток, когда вы хотите получить один из них.

так что должно быть:

if(burgers.checked){ 
    if(radBurgerRegular.checked){ 
     total = total + radBurgerRegular; 
    } 
    ... 
} 
if(fries.checked){ 
    ... 
} 
if(drinks.checked){ 
    ... 
}

Кроме того, вы делаете все это добавление в общей сложности, а потом ничего с ним не делать.

Переместить это:

var outputArea = document.getElementById('txtTotal'); 
outputArea.innerHTML = total + divBurgers + divFries + divDrinks;

в нижней части функции (и избавиться от всех divBurgers, divFries материал):

var outputArea = document.getElementById('txtTotal'); 
outputArea.innerHTML = total;

Следующая проблема заключается в том, что нигде не цена на самом деле добавляется. Когда вы getElementById(), это значение не волшебным образом станет ценой, которая находится в скобках. Вам нужно заменить total = total + radBurgerRegular с ценой:

if(burgers.checked){ 
    if(radBurgerRegular.checked){ 
     total = total + 4.19; 
    } 
    ... 
}

наконец, вы хотите изменить область отображения на пролет вместо входа. изменить:

Total Meal Cost: <input type="text" name="txtTotal" id="txtTotal" />

к:

Total Meal Cost: <span id="txtTotal"></span>

и что должен сделать это!

EDIT:

последняя вещь, вам нужно изменить следующие строки:

var burgers = document.getElementById('divBurgers'); 
var fries = document.getElementById('divFries'); 
var drinks = document.getElementById('divDrinks');

к этому:

var burgers = document.getElementById('chkBurgers'); 
var fries = document.getElementById('chkFries'); 
var drinks = document.getElementById('chkDrinks');

потому DIV не может быть "проверено" и всегда будет возвращать undefined (false).

источник

2015-12-03 21:11:53 thedarklord47

Я заменил то, что вы сказали мне, когда я нажимаю элементы для добавления вместе и набираю итог, это не отображает мое общее количество. –

и изменение входа в диапазон, это говорит об общем неопределенном. –

Какова фактическая ошибка при нажатии кнопки? copy paste – thedarklord47

Всего не определено в инициализации.

Заменить

var outputArea = document.getElementById('txtTotal'); 
    outputArea.innerHTML = total

var outputArea = document.getElementById('txtTotal'); 
    outputArea.innerHTML = 0;

Или, возможно, лучшим вариантом является инициализация всего.

total = 0;  
var outputArea = document.getElementById('txtTotal'); 
     outputArea.innerHTML = total;

источник

2015-12-03 20:52:27 Taytorious

всего глобального – thedarklord47

и объявлено, но не инициализировано – Taytorious

еще не проблема – thedarklord47

Проблема заключается в функции ComputeTotal. я предлагаю вам взглянуть на следующей реализации:

var total; 
 
    var outputArea; 
 
    var btnCompute; 
 
    function ToggleBurgers() { 
 
     var checkbox = document.getElementById('chkBurgers'); 
 
     var burgers = document.getElementById('divBurgers'); 
 

 
     if (checkbox.checked) { 
 
      burgers.style.visibility = 'visible'; 
 
     } else { 
 
      burgers.style.visibility = 'hidden'; 
 
     } 
 
    } 
 
    function ToggleFries(){ 
 
     var checkbox = document.getElementById('chkFries'); 
 
     var fries = document.getElementById('divFries'); 
 

 
     if (checkbox.checked) { 
 
      fries.style.visibility = 'visible'; 
 
     } else { 
 
      fries.style.visibility = 'hidden'; 
 
     } 
 
    } 
 

 
    function ToggleDrinks(){ 
 
     var checkbox = document.getElementById('chkDrinks') 
 
     var drinks = document.getElementById('divDrinks'); 
 

 
     if (checkbox.checked) { 
 
      drinks.style.visibility = 'visible'; 
 
     }else { 
 
      drinks.style.visibility = 'hidden'; 
 
     } 
 
    } 
 

 

 
    function ComputeTotal() { 
 
     var total = 0; 
 
     var burgersCost = 0; 
 
     var friesCost = 0; 
 
     var drinksCost = 0; 
 

 
     if (document.getElementById('chkBurgers').checked) { 
 
      var burgersObj = document.querySelector('input[name="radBurgers"]:checked'); 
 
      var burgersValFromLabel = document.querySelector('label[for="' + burgersObj.id + '"]').textContent; 
 
      burgersCost = burgersValFromLabel.substring(burgersValFromLabel.lastIndexOf("(")+1,burgersValFromLabel.lastIndexOf(")")); 
 
     } 
 

 
     if (document.getElementById('chkFries').checked) { 
 
      var friesObj = document.querySelector('input[name="radFries"]:checked'); 
 
      var friesValFromLabel = document.querySelector('label[for="' + friesObj.id + '"]').textContent; 
 
      friesCost = friesValFromLabel.substring(friesValFromLabel.lastIndexOf("(") + 1, friesValFromLabel.lastIndexOf(")")); 
 
     } 
 

 
     if (document.getElementById('chkDrinks').checked) { 
 
      var drinksObj = document.querySelector('input[name="radDrinks"]:checked'); 
 
      var drinksValFromLabel = document.querySelector('label[for="' + drinksObj.id + '"]').textContent; 
 
      drinksCost = drinksValFromLabel.substring(drinksValFromLabel.lastIndexOf("(") + 1, drinksValFromLabel.lastIndexOf(")")); 
 
     } 
 

 

 
     var outputArea = document.getElementById('txtTotal'); 
 
     outputArea.value = total + parseFloat(burgersCost) + parseFloat(friesCost) + parseFloat(drinksCost); 
 
    } 
 

 

 
    function init() { 
 
     var chkBurgers = document.getElementById('chkBurgers'); 
 
     chkBurgers.onchange = ToggleBurgers; 
 

 
     var chkFries = document.getElementById('chkFries'); 
 
     chkFries.onchange = ToggleFries; 
 

 
     var chkDrinks = document.getElementById('chkDrinks'); 
 
     chkDrinks.onchange = ToggleDrinks; 
 

 
     var btnCompute = document.getElementById('btnCompute'); 
 
     btnCompute.onclick = ComputeTotal; 
 

 
     var outputArea = document.getElementById('txtTotal'); 
 
     outputArea.innerHTML = total 
 
    } 
 

 
    window.onload = init;

<div class="page"> 
 
    <div class="topbar"> 
 
     Menu 
 
    </div> 
 
    <div class="row"> 
 

 
     <!--Burgers CheckBox--> 
 
     <div class="cell"> 
 
      <input type="checkbox" name="chkBurgers" id="chkBurgers" />  <label for="chkBurgers">Burgers</label> 
 
     </div> 
 

 
     <!--Cell Containing Burger Menu--> 
 
     <div class="cell" id="divBurgers" style="visibility:hidden;"> 
 
      <input type="radio" name="radBurgers" id="radBurgerRegular" /><label for="radBurgerRegular">Regular (4.19)</label><br /> 
 
      <input type="radio" name="radBurgers" id="radBurgerCheese" /><label for="radBurgerCheese">w/ Cheese (4.79)</label><br /> 
 
      <input type="radio" name="radBurgers" id="radBurgerBacon" /><label for="radBurgerBacon">w/ Bacon (4.79)</label><br /> 
 
      <input type="radio" name="radBurgers" id="radBurgerBaconCheese" /><label for="radBurgerBaconCheese">w/ Bacon and Cheese (5.39)</label><br /> 
 
     </div> 
 
    </div> 
 
    <div class="clear"></div> 
 
    <div class="row"> 
 

 
     <!--Fries CheckBox--> 
 
     <div class="cell"> 
 
      <input type="checkbox" name="chkFries" id="chkFries" /><label for="chkFries">Fries</label> 
 
     </div> 
 

 
     <!--Cell Containing Fries Menu--> 
 
     <div class="cell" id="divFries" style="visibility:hidden;"> 
 
      <input type="radio" name="radFries" id="radFriesSmall" /><label for="radFriesSmall">Small (2.39)</label><br /> 
 
      <input type="radio" name="radFries" id="radFriesMedium" /><label for="radFriesMedium">Medium (3.09)</label><br /> 
 
      <input type="radio" name="radFries" id="radFriesLarge" /><label for="radFriesSmall">Large (4.99)</label><br /> 
 
     </div> 
 
    </div> 
 
    <div class="clear"></div> 
 
    <div class="row"> 
 

 
     <!--Drinks CheckBox--> 
 
     <div class="cell"> 
 
      <input type="checkbox" name="chkDrinks" id="chkDrinks" /><label for="chkDrinks">Drinks</label> 
 
     </div> 
 

 
     <!--Cell Containing Drink Menu--> 
 
     <div class="cell" id="divDrinks" style="visibility:hidden;"> 
 
      <input type="radio" name="radDrinks" id="radDrinkSoda" /><label for="radDrinkSoda">Soda (1.69)</label><br /> 
 
      <input type="radio" name="radDrinks" id="radDrinkWater" /><label for="radDrinkWater">Bottled Water (1.49)</label><br /> 
 
     </div> 
 

 
     <!--Cell Containing Compute Button and Total Field--> 
 
     <div class="cell" style="float:right;"> 
 
      Total Meal Cost: <input type="text" name="txtTotal" id="txtTotal" /><br /><br /> 
 
      <button id="btnCompute" name="btnCompute">Compute Total</button> 
 
     </div> 
 
    </div> 
 
    <div class="clear"></div> 
 
</div>

источник

2015-12-03 21:53:21 gaetanoM

Этот код, если он заменен моим, также не будет показывать общее количество при щелчке на общей сумме. –

@ J.Bush Теперь я сообщил весь ваш код, а не просто одну функцию: запустите фрагмент и скажите, что знаю. – gaetanoM

Да, этот сниппет также работает, только одно, если у вас есть одна общая сумма, которую вы не можете нажать на что-то еще и начать с новой суммы, я выяснил, как это сделать с кодом, с которого я начал! :) –

Как добавить итоговые значения и отобразить их в текстовом поле

ответ

Смежные вопросы