как заменить имя на идентификатор в javascript - PullRequest
Новая
       1

как заменить имя на идентификатор в javascript

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

Я работаю над небольшой программой и пытаюсь сделать что-то, чтобы пользователь мог выбрать элемент из списка «это как меню ресторана, где пользователь выбирает свои продукты, и он показывает цены и налоги», я использовал name = "items []", чтобы получить значения, которые мне было интересно, если есть способ использовать ID или класс вместо имени. Любая помощь будет оценена заранее. 

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>

Ответы [ 3 ]

1 голос
/ 18 февраля 2020

Возможные варианты: querySelectorAll или 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');

Или вы все еще можете использовать name атрибут input (вместо class): 

const checkboxes = document.querySelectorAll('input[name="items[]"]');
1 голос
/ 18 февраля 2020

Если у вас есть несколько, неправильно использовать один и тот же идентификатор.

вы можете использовать de class и выбрать его с помощью document.querySelectorAll('.items')

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

Вы можете выбрать элементы по их классу. Я бы порекомендовал использовать для этого jQuery, но это также можно сделать в чистом JavaScript. Давайте предположим, что у нас есть три базовых c флажка (это псевдокод): 

<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>

Мы могли бы использовать jQuery для перебора каждого элемента с именем класса ".form-control" в этом Сценарий: 

$(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);
        }
    });
});

Без jQuery вы бы сделали что-то вроде: 

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

и затем вы можете запустить check.each ();

As если нет, не давайте элементам одноименное имя, иначе JavaScript не будет знать, какой элемент вы пытаетесь выбрать. Если вы собираетесь выбирать элементы на основе их идентификатора, убедитесь, что они имеют разные идентификаторы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...