Блог

Итак, этот скрипт изменяет валюту и символ, если я выбрал валюту из тега select в html, но проблема в том, что он изменяет валюту и символ только для первой карты, а для остальных нет. Есть ли способ изменить их все одновременно, не выполняя скрипт для каждой карты? выбор работает следующим образом: Если бы я выбрал LBP и валюта была USD, тогда число было бы умножено на 8500, а если бы выбрал USD с валютой в LBP, тогда оно было бы разделено на 8500, в то время как если бы я выбрал ту же валюту, которая выбрана, тогда ничего не произойдет.

HTML:

 <div class="card">
        <img class="imgcar" src="cars/402088-2020-land-rover-range-rover-velar.jpg" alt="Avatar" style="width:16em">
        <div class="container">
          <h4><b>Range Rover Velar</b><br><b>4 Doors</b><br><b> 5 Passengers</b> </h4>
          <div><p id="price">100</p><p id="symbol">$</p><p id="duration">/24hrs</p></div>
        </div>
      </div>
      <div class="card">
        <img class="imgcar" src="cars/2020-BMW-M8-Competition-Convertible-02-e1570483239877.jpg" alt="Avatar"
          style="width: 16em;">
        <div class="container">
          <h4><b>BMW M8</b><br><b>2 Doors</b><br><b> 2 Passengers</b></h4>
          <p id="price">150</p><p id="symbol">$</p><p id="duration">/24HRS</p>
        </div>
      </div>
 

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

Используйте document .Запросите selectorall() и выполните итерацию по узлам cards:

 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"); 

 <div id="app"></div>
<div class="card">
    <img class="imgcar" src="cars/402088-2020-land-rover-range-rover-velar.jpg" alt="Avatar" style="width:16em">
    <div class="container">
        <h4><b>Range Rover Velar</b><br><b>4 Doors</b><br><b> 5 Passengers</b> </h4>
        <div>
            <p id="price">100</p>
            <p id="symbol">$</p>
            <p id="duration">/24hrs</p>
        </div>
    </div>
</div>
<div class="card">
    <img class="imgcar" src="cars/2020-BMW-M8-Competition-Convertible-02-e1570483239877.jpg" alt="Avatar"
          style="width: 16em;">
    <div class="container">
        <h4><b>BMW M8</b><br><b>2 Doors</b><br><b> 2 Passengers</b></h4>
        <p id="price">150</p>
        <p id="symbol">$</p>
        <p id="duration">/24HRS</p>
    </div>
</div> 

Прежде всего, очень плохая идея дублировать идентификатор … Document.getElementById() возвращает только один DOM element , поэтому я советую вам использовать классы, а затем использовать Document.getElementsByClassName() или:

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