根据输入框中输入的值更改 HTML 文本答案

【问题标题】：Changing HTML text based on a value entered into an input box根据输入框中输入的值更改 HTML 文本
【发布时间】：2022-01-12 23:35:04
【问题描述】：

我正在创建一个网站，并想使用 JavaScript 制作一个工具，以根据某人的鞋码选择滑板尺码。这是我正在使用的代码：

const shoeSize = document.getElementById('shoeSize').value
let boardSize = ''
switch (shoeSize) {
  case 0 <= 7: 
    boardSize = '7.75'
  break;
  case 8,9: 
    boardSize = '8'
  break;
  case 10,11: 
    boardSize = '8.25'
  break;
  case 12,13: 
    boardSize = '8.38'
  break;
  case 14 >= 20: 
    boardSize = '8.5'
  break;
  default:
    boardSize = '?'
  document.write(boardSize)
}

<p>
      Most people pick their board size by prefrence but I will make a tool below to choose a board size that will fit your shoe size best. The most popular board sizes are 7.75, 8, 8.25, 8.38, and 8.5. <br> <br>
      If your shoe size is: <input id='shoeSize' type="text" class="shoe">. The best board size for you would be:
</p>

无论我在文本框中输入什么内容，总是有一个“？”出现在我的网站上。我能做些什么/改变来解决这个问题。我想要发生的是，如果有人在文本框中输入例如“10”，则应该打印“8.25”。如果有任何其他提示可以改进我的代码，我也将不胜感激。

【问题讨论】：

标签： javascript html input switch-statement getelementbyid

【解决方案1】：

你有几个问题：

document.getElementById('shoeSize').value 返回一个字符串，你应该使用 parseInt 函数将字符串转换为整数。然后处理在文本框中输入文本的情况。 parseInt 然后将返回 NaN。（您也可以将输入类型更改为数字以防止这种情况发生）。
我认为加载页面时正在运行您的 javascript，而不是在更改输入时运行，最简单的方法是将 onchange 属性添加到您的输入中。
我对此不太确定，但 switch 语句看起来也有问题，据我所知14 >= 20 不应该工作。

这是 jsfiddle 演示： https://jsfiddle.net/cry9xzhb/13/

【讨论】：

【解决方案2】：

试试这个：

const shoeSizeInput = document.getElementById('shoeSize')
const shoeSizeResult = document.getElementById('resultSize') // Get reference for the element where you want to display result

// Add event listener which will fire when input is changing 
shoeSizeInput.addEventListener('input', (event) => {
  const shoeSize = parseInt(event.target.value) // Get input value and parse to number
  let boardSize = '?'

  switch (true) {
    case 0 <= shoeSize && shoeSize <= 7:
      boardSize = '7.75'
      break;
    case shoeSize === 8 || shoeSize === 9:
      boardSize = '8'
      break;
    case shoeSize === 10 || shoeSize === 11:
      boardSize = '8.25'
      break;
    case shoeSize === 12 || shoeSize === 13:
      boardSize = '8.38'
      break;
    case 14 <= shoeSize && shoeSize <= 20:
      boardSize = '8.5'
      break;
  }
  shoeSizeResult.textContent = boardSize // Set text of result element to board Size
})

<p>Most people pick their board size by prefrence but I will make a tool below to choose a board size that will fit your shoe size best. The most popular board sizes are 7.75, 8, 8.25, 8.38, and 8.5.</p>
<label>If your shoe size is:</label><input id='shoeSize' type="number" class="shoe">
<p id="resultSize"></p>

我改变了什么：

添加了一个事件监听器。您在页面加载时立即检查了输入值。因此它一直是空的。
更改了 switch 语句。您可以在此处阅读更多相关信息：Switch on ranges of integers in JavaScript
添加了p标签来显示结果。这比writeDocument()更好。

【讨论】：