Display rounded number in a span in JS

April 15, 2023

A tool that I am using is displaying a room temperature on a smart mirror. This line of code is creating the temperature value:

var temperatureTextWrapper = document.createTextNode(
   zone.state.sensorDataPoints.insideTemperature.celsius + "°"
);

After this the var is just being appended to an existing span.
By default, the value contains two decimal places eg. 25.76°C. However I would love to have it rounded to one decimal place or even full integers.

I already tried the .replace() or .slice() functions but with no success. What’s the best way to approach this?

>Solution :

You can use Math.round() to round to the nearest integer.

var temperature = 25.76;

// Nearest integer
console.log( Math.round(temperature) )

// One decimal place
console.log( Math.round(temperature*10)/10 )

In your case, you could use:

var temperature = zone.state.sensorDataPoints.insideTemperature.celsius;

var temperatureTextWrapper = document.createTextNode(Math.round(temperature) + "°");