Change h1 using javascript switch statement based on input-CodePudding

I need to know how to get the h1 sun emoji to change when user input less than or equal to 0. I feel like I have the logic but just need to code. Once the user inputs a temperature less than 0 the h1 needs to change to a certain emoji or content. Can I get some advice please. I am struggling here. this is my code:

function question() {
  let city = prompt("what city do you live in?");
  let temp = prompt("What temperature is it?");
  let h1 = document.queryselector("h1");
  h1.innerHtml = "Currently"   temp   "degrees"   " in "   city;
}

function change() {
  switch (true) {
    case (temp <= 0):
      document.getElementById("h1").innerHtml = "Currently"   temp   "degrees"   "in "   city;
  }
}

<h1>
  sun emoji
</h1>
<h1 >
  Currently 21 degrees in Tokyo
</h1>

<h2>
  13 degrees / <strong>23 degrees</strong>
</h2>

The h1 has to change to a different emoji based on the users response of less than or equal to 0. Along with the emoji I need to input of the user city to change along with it.I just need the h1 section to change.Should I use a switch or if else statement?

CodePudding user response：

Firstly, you have multiple h1 elements - queryselector only returns the first one, so in this case you would be replacing the emoji, not the text. It would be prudent to give the various elements that you intend to edit id fields.

<h1 id="emoji-el">
  sun emoji
</h1>
<h1 id="temp-details" >
  Currently 21 degrees in Tokyo
</h1>

Now you can use queryselector to select the correct elements.

Secondly, I'd like to say that it is good practice to have every function have a single responsibility - for example, one function get a correct emoji, while another puts things into elements.

Given this, I would use an if list because of the way your condition is structured:

function getEmoji(temp) {
  if (temp < 0) return ❄️;
  if (temp < 13) return ☁;
  return ☀️;
}

You can likely use emojis directly for HTML text values, and if you only use upper limits like I did you don't need elses. IMO this is the nicest way.

You final function would look something like this:

function questionUser() {
  const city = prompt("What city do you live in?");
  const temp = prompt("What temperature is it?");
  updatePage(temp, city);
}

function updatePage(temp, city) {
  const emojiElement = document.queryselector("#emoji-el");
  const tempElement = document.queryselector("#temp-details");
  const emoji = getEmoji(Number(temp));
  emojiElement.innerHtml = emoji;
  tempElement.innerHtml = `Currently ${temp} degrees in ${city}.`;
}

This way you would be able to re-use the update logic elsewhere, and also it is clear what every function does.

Hope this helps.

CodePudding user response：

Can achieve the same result with switch or if statement. You just have to trigger the function on onChange or onBlur.

CodePudding user response：

It's advisable to use classNames or id's for your html element, which makes retrieving specific elements easier.

Switch is suitable if your conditions have a fixed value. In this case a a ternary (conditional operator) would be an idea.

Here's an exemplary snippet demoing ternary or switch to determine the 'emoji' to display, based on the given temperature. It uses event delegation for handling the button click.

document.addEventListener(`click`, handle);

function handle(evt) {
  // act only if button#showTemperatures is clicked
  if (evt.target.id === `showTemperatures`) {
    return question();
  }
}

function emo(temp) {
  const emojiTxt = temp < 15 ? `*Brr**` : 
    temp < 25 ? `*nice*` : 
    temp < 30 ? `*it's getting hot here*` : `*tropical!*`;
    
  document.querySelector(`.emoji`).textContent = emojiTxt;
}

/* using switch is possible, but you need something extra */
function emoSwitch(temp) {
  const lt = n => temp < n;
  let emojiTxt = ``;

  switch (true) {
    case lt(10):
      emojiTxt = `*Brr*`;
      break;
    case lt(25):
      emojiTxt = `*nice*`;
      break;
    case lt(30):
      emojiTxt = `*it's getting hot here*`;
      break;
    default:
      emojiTxt = `*tropical!*`;
  }

  document.querySelector(`.emoji`).textContent = emojiTxt;
}

function question() {
  // id's make your coding life simple
  const city = document.querySelector(`#city`).value;
  const temp = document.querySelector(`#temp`).value;

  // one of the values is not filled, alert
  if (!city.trim() || temp < 0) {
    return alert(`please fill out both fields`);
  }

  // fill in h1.temperature
  document.querySelector(`.temperature`).textContent =
    `Currently ${temp} degrees in ${city}`;

  // fill in the emoji
  return document.querySelector(`#switch`).checked ?
    emoSwitch(temp) : emo(temp);
}

<!-- changed for demo -->
<p>
  <b ></b>
  <b >Currently 21 degrees in Tokyo</b>
</p>

<hr>

<p><input type="text" id="city"> What city do you live in?</p>
<p><input type="number" id="temp" min="0" max="55"> What temperature is it up there?</p>
<p>
  <button id="showTemperatures">Fill in</button>
  <input type="checkbox" id="switch">Use switch
</p>