/ / Dodaj wartość do zmiennej JavaScript, gdy zaznaczone jest pole wyboru - javascript, html, checkbox, innerhtml

Dodaj wartość do zmiennej JavaScript, gdy zaznaczone jest pole wyboru - javascript, html, checkbox, innerhtml

Jest to prosta aplikacja do obliczania całkowitej ceny wybranych elementów sprzętu komputerowego. Powinien działać z innerHTML i zmienić go dinamicznie.

Problem polega na tym, że z moim kodem nic się nie dzieje, więc możesz to sprawdzić na moim skrzypcach lub po prostu spojrzeć na poniższy kod. Powinien zmienić cenę w ostatnim polu?

SKRZYPCE

Kod:

<table style="width:230px;padding:5px;border:1px solid #f0f0f0;font-size:14px;">
<tr style="background-color:#f0f0f0;">
<th style="width:200px;text-align:left;">Elements</th>
<th align="center"></th>
</tr>
<tr style="border-bottom:1px solid #a3a3a3;">
<td>CPU unit</td>
<td align="center">&#10003;</td>
</tr>
<tr>
<tr>
<td>Motherboard</td>
<td align="center">&#10003;</td>
</tr>
<td>Graphic card</td>
<td align="center"><input type="checkbox" id="id_1" value="25" onchange="check();"></td>
</tr>
<tr>
<td>Memory chip</td>
<td align="center"><input type="checkbox" name="" value="" onchange="check();></td>
</tr>
<tr>
<td>Monitor</td>
<td align="center"><input type="checkbox" name="" value="" onchange="check();></td>
</tr>
</table>

<table style="width:220px;padding:1px;border:1px solid #f0f0f0;font-size:22px; font-weight:bold;">
<tr style="border-bottom:1px solid #a3a3a3;text-align:center;background-color:#80CCDC">

<td id="total"><script>document.getElementById("total").innerHTML = price;</script></td></tr><tr>
</table>

JAVASCRIPT

var basic = 300;
var add = 0;

function check()
{
if(document.getElementById("id_1").checked) {
add = 120;
}
if(document.getElementById("id_1").checked) {
add = 40;
}
if(document.getElementById("id_1").checked) {
add = 90;
}

}
var p = basic + add;
var price = p + " &euro;";

Odpowiedzi:

3 dla odpowiedzi № 1

Jest kilka problemów

  • Musisz zadzwonić document.getElementById("total").innerHTML = price; wewnątrz check aktualizuje się po kliknięciu pola wyboru;
  • Nie możesz mieć wielu przedmiotów o tym samym ID. Zmieniłem je na id_1, id_2, id_3
  • Musisz dodać do istniejącej wartości w add zmienna
  • Musisz wprowadzić zmiany dla wszystkich pól wyboru, nie tylko dla pierwszego.

Zmień swój kod na następujące http://jsfiddle.net/mendesjuan/3ja4X/3/

function check() {
var basic = 300;
var add = 0;
if(document.getElementById("id_1").checked) {
add += 120;
}
if(document.getElementById("id_2").checked) {
add += 40;
}
if(document.getElementById("id_3").checked) {
add += 90;
}
var p = basic + add;
var price = p + " &euro;";
document.getElementById("total").innerHTML = price;
}

check();

Aby uzyskać nawet bardziej przejrzysty kod, możesz skorzystać z poniższych http://jsfiddle.net/mendesjuan/3ja4X/4/

function updateTotal(){
var basic = 300;
var add = 0;
var form = document.getElementById("form");
// Store the value for each item in the checkbox so
// you don"t need to have three separate `if`s  and IDs for them.
var checkboxes = form.getElementsByClassName("addon");
for (var i=0; i < checkboxes.length; i ++) {
if (checkboxes[i].checked) {
add += parseInt(checkboxes[i].value, 10);
}
}
var p = basic + add;
var price = p + " &euro;";
document.getElementById("total").innerHTML = price;
}
// Hookup handlers from JS, not in the HTML from a single
// place using event delegation
document.getElementById("form").addEventListener("change", updateTotal);

1 dla odpowiedzi nr 2

Dodaj swoje obliczenia do funkcji sprawdzania lub zmodyfikuj ją po dodaniu liczb:

function check(){
if(document.getElementById("id_1").checked) {
add = 120;
}
if(document.getElementById("id_1").checked) {
add = 40;
}
if(document.getElementById("id_1").checked) {
add = 90;
}
var p = basic + add;
var price = p + " &euro;";
document.getElementById("total").innerHTML = price;
}

Ten kod nie jest uruchamiany tylko raz po załadowaniu strony.