Possible to getElement by ClassName

Question

is it possible here to get the value using getElementByClassName and what should i put inside the parseFloat for the sum portion ?

The idea here is to get the sum amount from each checkbox checked and calculate the total.

I cannot use external libraries so only pure javascript selectors here and I cannot change anything within the while echo statement.

<?php
include_once('database_conn.php');
$sqlCDs = 'SELECT CDID, CDTitle, CDYear, catDesc, CDPrice FROM nmc_cd b inner join nmc_category c on b.catID = c.catID WHERE 1 order by CDTitle';
$rsCDs = mysqli_query($conn, $sqlCDs);
while ($CD = mysqli_fetch_assoc($rsCDs)) {
    echo "\t<div class='item'>
            <span class='CDTitle'>{$CD['CDTitle']}</span>
            <span class='CDYear'>{$CD['CDYear']}</span>
            <span class='catDesc'>{$CD['catDesc']}</span>
            <span class='CDPrice'>{$CD['CDPrice']}</span>
            <span class='chosen'><input type='checkbox' name='CD[]' value='{$CD['CDID']}' title='{$CD['CDPrice']}' /></span>
        </div>\n";
}
?>

<p style="color: red; font-weight: bold;">I have read and agree to the terms and conditions
            <input type="checkbox" id="termsChkbx" onchange="isChecked(this,'sub1')"/></p>

JS:

function isChecked(chosen) {
var number = parseFloat(document.getElementsByClassName('CDPrice')[0].innerHTML);
    if(chosen.is(':checked')) {
        sum = sum + parseFloat(????);
    } else {
        sum = sum - parseFloat(????);
    }
    $('#total').???('CDPrice')[0].innerHTML(sum.toFixed(2));
}

duplicated http://stackoverflow.com/questions/3808808/how-to-get-element-by-class-in-javascript — yelliver, Dec 01 '15 at 04:28
Pure JS does not use syntax like this: `$('#total').` that's jQuery which is an external library (like the external libraries you said you can't use.) -_- — zer00ne, Dec 01 '15 at 04:37

Dave · Accepted Answer · 2015-12-01T15:44:57.293

Here's a solution in plain JavaScript. The checkbox event handlers are hardcoded in the HTML, which is not best practice, but it's just an easy way to show you how to get it working.

function isChecked() {
  var sum = 0; //store a running sum
  
  //find all price elements: class "CDPrice" within element of class "item"
  [].forEach.call(document.querySelectorAll(".item .CDPrice"), function(item) {
    //get the corresponding checkbox
    var chosen = item.parentElement.querySelector('[type="checkbox"]');
    
    //if checked, add to the running sum
    if (chosen.checked) {
      var value = parseFloat(item.innerHTML) || 0; //if parseFloat() returns NaN, default value to zero
      sum += value;
    }
  });
  
  //update the total
  var total = document.getElementById("total");
  total.value = sum.toFixed(2);
}

<div class='item'>
  <span class='CDTitle'>Title1</span>
  <span class='CDYear'>Year1</span>
  <span class='catDesc'>Description1</span>
  <span class='CDPrice'>12.34</span>
  <input type='checkbox' onchange="isChecked();" />
</div>
<div class='item'>
  <span class='CDTitle'>Title2</span>
  <span class='CDYear'>Year2</span>
  <span class='catDesc'>Description2</span>
  <span class='CDPrice'>56.78</span>
  <input type='checkbox' onchange="isChecked();" />
</div>
<div class='item'>
  <span class='CDTitle'>Title3</span>
  <span class='CDYear'>Year3</span>
  <span class='catDesc'>Description3</span>
  <span class='CDPrice'>(None)</span>
  <input type='checkbox' onchange="isChecked();" />
</div>

<input id="total" />

Thanks it work. I replace the call function with function isChecked(chosen) and it seems it will only calculate the total amount when another call function is triggered. — Doran L, Dec 01 '15 at 05:35
It seems like var chosen = item.parentElement.querySelector('[type="checkbox"]'); is pointing to other checkbox. — Doran L, Dec 01 '15 at 05:59
My code assumes that the `CDPrice` element and the `checkbox` are siblings in the DOM. Is your structure different? — Dave, Dec 01 '15 at 15:43
Yes mine is a little different, because there's no onchange='isChecked(); to trigger so the next checkbox which had the the onchange='isChecked(); trigger it to calculate the total — Doran L, Dec 01 '15 at 20:59

Possible to getElement by ClassName

1 Answers1