0

This is not a duplicate so please don't close this. I did my research and already found what is considered a duplicate and it did not answer my quesiton.

I have some code that almost works. I have to take a string, convert it to a number, then convert it back to a currency based string and then replace the text withing the innerHTML on screen. In my console.log, I am getting back the exact amounts I need for all the elements with the class="lh1em". I got everything working up until the point I have to replace the text with this new variable I have created with the new and improved data. I have tried to do it with a function, without a function but in both cases, I get no results, no errors except I get correct info in the console.log. Here is my html:

<div class="price">
  <span class="label">from</span>
    <span class="value"><span class="text-lg lh1em item "> $3,845.00</span>
  </span>
  <br>
  <span class="label">from</span>
    <span class="value"><span class="text-lg lh1em item "> $3,645.00</span>
  </span>
</div>

and my javascript

let customPrice = document.getElementsByClassName('lh1em');

Array.from(customPrice).forEach(function(dollarAmount) {
    let withoutDollar = dollarAmount.innerText.substr(1); 
    let withoutComa = withoutDollar.replace(",",'');
    let noPointZero = withoutComa.replace(/\.00/, '');
    noPointZero = Number(noPointZero);
    let newDollar = noPointZero - 600;
    let formatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
    });
    
    let doubleOccupancyPrice = formatter.format(newDollar);
    
    function changeText() {
          document.getElementsByClassName('lh1em').innerHTML = doubleOccupancyPrice;
    }
    changeText();
    console.log(doubleOccupancyPrice);
});

If anyone can show me what I am doing wrong, I would sure appreicate it. Thank you in advance.

Erik James Robles
  • 721
  • 2
  • 12
  • 24
  • 1
    More specific than the duplicate (whose accepted answer is less than accurate) is that `document.getElementsByClassName('lh1em')` returns a live [HTMLCollection](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) and not a single element. You should instead use `dollarAmount.innerHTML = doubleOccupancyPrice;` – pilchard Feb 25 '21 at 03:13
  • thank you @pilchard for taking the time to answer. I have been struggling for hours on this. Let me give your code a shot and I will let you know how it goes. – Erik James Robles Feb 25 '21 at 03:15
  • @pilchard absolutely correct. the code worked like a charm. Thank you so much. – Erik James Robles Feb 25 '21 at 03:17

0 Answers0