JS script working only on one html card instead of all

Question

So this Script changes the currency and symbol if I selected the currency from a select tag in html, but the problem is that it changes the currency and symbol only for the first card but the others not. Is there a way to change them all at the same time without doing a script for every card? the select works as follows: If I chose LBP and the currency was USD then the number would be multiplied by 8500 and if chose USD with the currency being in LBP then it would be divided by 8500, while if I chose the same currency that is chosen then nothing happens.

HTML:


        
        
          Range Rover Velar
4 Doors
 5 Passengers 
          100
$
/24hrs
        
      
      
        
        
          BMW M8
2 Doors
 2 Passengers
          150
$
/24HRS

JS:

function report(currencyy) {
var price = document.getElementById("price");
var symbol = document.getElementById("symbol");

if (currencyy == "lbp") {
  if (symbol.textContent == "$") {
    symbol.textContent = "lbp";
    var text = price.textContent;
    var number = parseInt(text) * 7500;
    price.textContent = number;
  }
 }
 if (currencyy == "usd") {
  if (symbol.textContent == "lbp") {
    symbol.textContent = "$";
    var text = price.textContent;
    var number = parseInt(text) / 7500;
    price.textContent = number;
  }
 }
}

user_14349808 · Answer

Use document.querySelectorAll() and iterate over the cards nodes:

const currencies = { //--> store the currency data
  lbp: {
    symb: "lbp",
    fn: value => Number(value) * 7500
  },
  usd: {
    symb: "$",
    fn: value => Number(value) / 7500
  }
};

function report(currencyy) {
  var cardNodes = document.querySelectorAll(".card");
  Array.from(cardNodes).forEach(card => { // --> update the card node data
    const symbNode = card.querySelector("#symbol");
    const priceNode = card.querySelector("#price");
    const { symb, fn } = currencies[currencyy];
    if (symbNode.textContent === symb) return;
    symbNode.textContent = symb;
    priceNode.textContent = fn(priceNode.textContent);
  });

  
}

report("usd");



    
    
        Range Rover Velar
4 Doors
 5 Passengers 
        
            100
            $
            /24hrs
        
    


    
    
        BMW M8
2 Doors
 2 Passengers
        150
        $
        /24HRS

user_13809466 · Answer

First of all, it's a very bad idea to duplicate an ID... Document.getElementById() return only one DOM element, so my advice is that you use classes, and then, use Document.getElementsByClassName() or:

node.querySelectorAll('.yourClassName').forEach(element => {
  // Your code
})

JS script working only on one html card instead of all

2 Answers