How can i make pictures and text to stay on the same line and not change the position?-CodePudding

My HTML page is empty, with only 3 span elements. Here is my javascript code how i insert my images:

if (fahrenheitTemperature < 60) {
  let coldPicture = "./images/cold.png"
  let temperatureIcon = document.getElementById("temperatureIcon").innerHTML = `<h3> Current temperature: </h3> ${fahrenheitTemperature.toFixed(2)} Fahrenheit\xB0 <img src="${coldPicture}" height="50" width="50">`;
} else if (fahrenheitTemperature > 67) {
  let hotPicture = "./images/hot.png";
  let temperatureIcon = document.getElementById("temperatureIcon").innerHTML = `<h3> Current temperature: </h3> ${fahrenheitTemperature.toFixed(2)} Fahrenheit\xB0 <img src="${hotPicture}" height="50" width="50">`;

} else {
  document.getElementById("temperatureIcon").innerHTML = `<h3> Current temperature: </h3> ${fahrenheitTemperature} Fahrenheit\xB0`;
}

if (windCondition > 11) {
  let windPicture = "./images/wind.png";
  let windSpeed = document.getElementById("wind").innerHTML = `<h3> Wind Speed: </h3> ${windCondition} mph wind <img src="${windPicture}" height="50" width="50">`;
} else {
  document.getElementById("wind").innerHTML = `<h3> Wind Speed: </h3> ${windCondition} mph wind`;

}

Basically i want to insert a image when certain condition is met. But as you can see on the gif that i post, the text of Current Temperature and Wind Speed is moving (i think is going one line down) once the image is posted. How can i make that to stay on the same line and not moving at all, doesnt matter if there is a picture or no? I know i can do that with resizing the pictures and using smaller width and height but

CodePudding user response：

I know you said you had only 3 spans and I don't know your requirements, but that javascript can really be cleaned up if you want to consider that constant text need not be part of the JS.

Also I added some values for the missing inputs

You can then use css to style the HTML.

let fahrenheitTemperature = 59;
let windCondition = 10;

document.getElementById("spnTemp").innerText = fahrenheitTemperature.toFixed(2);
let img = document.getElementById("imgTemp");

if (fahrenheitTemperature < 60) {
  img.src = "./images/cold.png";
} else if (fahrenheitTemperature > 67) {
  img.src = "./images/hot.png";
} else {
  img.src = null;
}

document.getElementById("spnWind").innerText = windCondition.toFixed(2);
document.getElementById("imgWind").src = (windCondition > 11 ? "./images/wind.png" : '');

h3 {
  display: inline;
}

<div>
  <h3>Current temperature:</h3>
  <span id="spnTemp"></span>&deg; Fahrenheit
  <img id="imgTemp" src="" height="50" width="50" />
</div>
<div>
  <h3>Wind Speed:</h3>
  <span id="spnWind"></span> mph Wind
  <img id="imgWind" src="" height="50" width="50" />
</div>

CodePudding user response：

this is a common issue if you don't understand the difference between browser reflow and repaint also reading about Cumulative Layout Shift understanding this will lead you to your own solution