CODEWITHSUNDEEP
javascripthtmlcss
marie
marie

Reputation: 129

how to replace name with an ID in javascript

I'm working on small programme and trying to make something that user can choose an item from the list "its like a resturant menu where the user choose their foods and it shows the prices and the tax", I used name="items[]" to get the values i was wondering if there is a way to use ID or Class instead of the name.Any help would be appreciated in advance .

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()
{
  initVariable();
  
 for(var i =0 ;i< checks.length;i++)
   {
     if(checks[i].checked)
       {
         count+=parseFloat(checks[i].value);
       }
   }
  ItemTotal.innerHTML +=count;
  taxFeild.innerHTML+=(parseFloat(tax*count));
  Total.innerHTML+= (tax*count) + count;
}

btn.addEventListener('click',Calculate);


function initVariable()
{
  count =0;
  ItemTotal.innerHTML="Item Total: ";
  taxFeild.innerHTML =" Tax: ";
  Total.innerHTML ="Total with Tax: ";
}
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"/>

<head>
 

<title>Test</title>
</head>

<body>
  <div class = "container">
   <div id="checkBoxes">
  <input type="checkbox" class="items" value='7.99' id="item1">Fried Chicken ($7.99)<br>
  <input type="checkbox" class="items" value='9.99' id="item1"> Fried Halibut ($9.99)<br>
  <input type="checkbox" class="items" value='12.99' id="item1"> Hamburger ($12.99)<br><br>
    </div>
   <button id="btn">Calculate</button>
  
    
    <div id="Sums">
      <p id="ItemTotal"> Item Total: </p>
      <p id="Tax"> Tax: </p>
      <p id="TotalWithTax">Total with Tax: </p>
      
    </div>
  </div>  
  
  
  
</body> 
    
</html>

Upvotes: 0

Views: 569

Answers (3)

Simeon Ikudabo
Simeon Ikudabo

Reputation: 2190

You can select elements by their class. I would recommend using jQuery for this, but it can also be done in pure JavaScript. Let's assuming that we have three basic checkboxes (this is pseudo code):

<input type="checkbox" class="form-control" value="7.99">
<input type="checkbox" class="form-control" value="9.99">
<input type="checkbox" class="form-control" value="8.99">
<button class="btn btn-primary" type="button">
    Calculate
</button>

We could use jQuery to iterate over each element with the class name ".form-control" in this scenario:

$(document).ready(function() {
    const tax = 0.05;
    $('.btn').on('click', function() {
        let total = 0;
        $('.form-control').each(function() {
            if($(this).is(':checked')) {
                let val = parseFloat($(this).val());
                total += val;
            }
        });
        if(total > 0) {
            total += tax;
            alert('Your total is $' + total);
        }
    });
});

Without jQuery you would do something such as:

const checks = document.getElementByClassName('form-control');

and then you could run an checks.each();

As a side not, do not give elements the same ID name or else JavaScript will not know which element you are trying to select. If you are going to select elements based on their id, make sure they have different ID's.

Upvotes: 0

Serhii C.
Serhii C.

Reputation: 61

The possible variants could be to use querySelectorAll or getElementsByClassName:

<input type="checkbox" class="items" value='7.99' id="item1">Fried Chicken ($7.99)
<input type="checkbox" class="items" value='9.99' id="item1"> Fried Halibut ($9.99)
<input type="checkbox" class="items" value='7.99' id="item1"> Hamburger ($7.99)

const checkboxes = document.getElementsByClassName('items');
// OR
const checkboxes = document.querySelectorAll('.items');

Or you still could use name attribute on input (instead of class):

const checkboxes = document.querySelectorAll('input[name="items[]"]');

Upvotes: 1

Sarabadu
Sarabadu

Reputation: 597

If you have more than one its not correct to use same ID.

you can use de class and select it with document.querySelectorAll('.items')

Upvotes: 1

Related Questions