object HTMLSpanElement showing up on return after initiating typescript-CodePudding

I'm writing a typescript to automatically calculate currency exchange rates on different websites, everything seems to be working, except for one part, when the typescript alters the text on the HTML page, it shows "[object HTMLSpanElement]" before the value that was calculated.


var USDtoEUR = () => {
    var findUSD = document.querySelectorAll(".usd")[0];
    if (findUSD === null){
        return;
    };
    var EUR = "0.94"; 
    parseInt(EUR);
    parseInt(findUSD);
    var y = findUSD * EUR
    var z = y.toString();
    findUSD.textContent = z;
};

setInterval(USDtoEUR, 300);

That's the entirety of my script so far, the selector is a span on the html page. The script returns the value that's needed, but it always has the "[object HTMLSpanElement]" part in front of it. I'm not sure what is causing this.

CodePudding user response：

Once you locate an Element with document.querySelector(".usd"), you need to get the text from within it to before sending that as input to parseInt.

Also note that while parseInt returns an integer or NaN, it doesn't mutate the input.

const EUR_RATE = 0.94;

const USDtoEUR = () => {
  const findUSD = document.querySelector(".usd");
  if (findUSD === null) {
    return;
  };
  const y = parseInt(findUSD.textContent.replace(/[^0-9\.-] /g,"")) * EUR_RATE
  findUSD.textContent = `€${y}`;
};

setInterval(USDtoEUR, 300);

<span >$1000</span>