如何实现输入脚长数值输出对应欧洲鞋码的HTML&JavaScript功能？

可以直接改造现有代码，添加交互触发逻辑和结果展示区域，实现用户输入脚长后查询对应欧洲鞋码的功能。以下是完整的实现代码：

完整HTML代码 #

<label for="usr">脚长 (cm):</label>
<input type="number" step="0.1" class="form-control" id="usr">
<button onclick="convertToEuroSize()">查询欧洲鞋码</button>
<div id="result" style="margin-top: 10px;"></div>

完整JavaScript代码 #

var shoeSizeMap = [
  { cm: '23.5', euroSize: '39' },
  { cm: '24.1', euroSize: '39' },
  { cm: '24.4', euroSize: '40' },
];

function findEuroSizeByCm(inputCm) {
  // 将输入值转为字符串，与数组中cm字段的类型匹配
  const cmStr = inputCm.toString();
  return shoeSizeMap.find(shoeSize => shoeSize.cm === cmStr);
}

function convertToEuroSize() {
  const inputElement = document.getElementById('usr');
  const resultElement = document.getElementById('result');
  const inputValue = inputElement.value;

  // 处理空输入情况
  if (!inputValue) {
    resultElement.textContent = '请输入脚长数值';
    return;
  }

  const matchedShoe = findEuroSizeByCm(inputValue);
  if (matchedShoe) {
    resultElement.textContent = `对应的欧洲鞋码：${matchedShoe.euroSize}`;
  } else {
    resultElement.textContent = '未找到对应鞋码，请输入数组内的有效脚长数值';
  }
}

关键改动说明 #

• 新增交互元素：添加了查询按钮和结果展示div，让用户可以主动触发查询并直观看到结果
• 输入处理逻辑：新增convertToEuroSize函数，负责获取用户输入、调用查询逻辑、处理结果展示
• 类型匹配处理：将用户输入的数值转为字符串，确保与数组中cm字段的字符串类型一致，避免查找失败
• 异常情况处理：针对空输入、输入值不在数组中的情况，给出明确的提示信息
• 移除冗余代码：原代码中重写console.log的逻辑可以移除，因为现在直接在页面展示结果，无需将日志输出到页面元素

内容的提问来源于stack exchange，提问作者Jaanis