根据输入使用 javascript switch 语句更改 h1

Question

我需要知道当用户输入小于或等于 0 时如何让 h1 sun emoji 发生变化。我觉得我有逻辑但只需要编码。 一旦用户输入低于 0 的温度，h1 需要更改为某个表情符号或内容。 请给我一些建议。 我在这里挣扎。 这是我的代码：

 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 class="temperature"> Currently 21 degrees in Tokyo </h1> <h2> 13 degrees / <strong>23 degrees</strong> </h2>

h1 必须根据小于或等于 0 的用户响应更改为不同的表情符号。除了表情符号，我还需要输入用户城市的输入以随之更改。我只需要更改 h1 部分。应该我使用 switch 或 if else 语句？

Answer 1

首先，您有多个h1元素 - queryselector仅返回第一个元素，因此在这种情况下，您将替换表情符号，而不是文本。 提供您打算编辑id字段的各种元素是明智的。

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

现在您可以使用queryselector到 select 正确的元素。

其次，我想说让每个 function 都有一个单一的职责是一个很好的做法 - 例如，一个 function 获得正确的表情符号，而另一个将内容放入元素中。

鉴于此，由于您的条件的结构方式，我将使用if列表：

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

您可以直接将表情符号用于 HTML 文本值，如果您像我一样只使用上限，则不需要else 。 IMO 这是最好的方法。

你最终的 function 看起来像这样：

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}.`;
}

这样，您就可以在其他地方重新使用更新逻辑，而且很清楚每个 function 的作用。

希望这可以帮助。

Answer 2

可以使用 switch 或 if 语句达到相同的结果。 您只需在 onChange 或 onBlur 上触发 function。

Answer 3

建议为您的 html 元素使用 classNames 或 id，这样可以更轻松地检索特定元素。

如果您的条件具有固定值，则 Switch 是合适的。 在这种情况下，一个ternary （条件运算符）将是一个想法。

这是一个示例性片段演示ternary或switch ，用于根据给定的温度确定要显示的“表情符号”。 它使用事件委托来处理按钮单击。

 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 class="emoji"></b> <b class="temperature">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>