Changing Html on IF statement in JS

so my code is about when I select the currency the price and symbol must change; if I chose USD $ and it already was in $ then nothing should change while If I chose LBP and the currency was in $ the price must be multiplied by 2000 and the symbol would change from $ to LBP, But the problem is that when I introduced this statement in JS the script stops on working (it was multiplying it by 2000):

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

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

<pre> <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>
    <p id="price">100</p><p id="symbol">$</p><p>/24hrs</p>
  </div>
</div>
</pre>