求助：如何用JavaScript获取10个输入框值并存入数组

我看了你的代码，主要有几个小问题导致功能无法正常运行，咱们一步步来修正：

1. 输入框值的获取方式错误 #

你现在用document.getElementById(inputId).innerHTML来获取输入框内容，但输入框（<input>）的内容是存在value属性里的，innerHTML是用来获取元素内部的HTML结构，对输入框来说完全不对。应该改成：

n[i] = document.getElementById(inputId).value;

2. 按钮事件绑定错误 #

你的HTML里两个按钮的onClick写法有语法错误，而且没有绑定到你定义的calcularMaior和calcularMenor函数上。应该改成：

<button name="exibir" onClick="calcularMaior()">Exibir MAIOR elemento</button>
<button name="exibir" onClick="calcularMenor()">Exibir MENOR elemento</button>

3. 全局变量污染问题 #

你把i声明成了全局变量，这可能会导致后续其他逻辑出问题，建议在循环内部用let来声明局部变量：

for(let i = 0; i < 10; i++) {
  // ... 循环逻辑
}

4. 最大最小值计算逻辑缺失 #

你现在的calcularMaior和calcularMenor函数是空的，需要补充计算逻辑，同时还需要在HTML里加一个id="result"的元素来显示结果。

修正后的完整代码 #

HTML部分（仅修改vetor相关区域）

<div id="vetor">
  <fieldset>
    <legend>Vetor</legend>
    <input type="text" name="inputVetor" id="input0">
    <input type="text" name="inputVetor" id="input1">
    <input type="text" name="inputVetor" id="input2">
    <input type="text" name="inputVetor" id="input3">
    <input type="text" name="inputVetor" id="input4">
    <input type="text" name="inputVetor" id="input5">
    <input type="text" name="inputVetor" id="input6">
    <input type="text" name="inputVetor" id="input7">
    <input type="text" name="inputVetor" id="input8">
    <input type="text" name="inputVetor" id="input9">
  </fieldset>
  <button name="exibir" onClick="calcularMaior()">Exibir MAIOR elemento</button>
  <button name="exibir" onClick="calcularMenor()">Exibir MENOR elemento</button>
  <!-- 添加结果显示区域 -->
  <div id="result" class="mt-3"></div>
</div>

JavaScript部分

// 抽离获取输入框值的逻辑，方便复用
function getInputValues() {
  const values = [];
  for(let i = 0; i < 10; i++) {
    const inputId = `input${i}`; // 简化ID拼接的写法
    // 将输入值转为数字，空值默认设为0，可根据需求调整
    const value = parseFloat(document.getElementById(inputId).value) || 0;
    values.push(value);
  }
  return values;
}

function calcularMaior() {
  const values = getInputValues();
  const maior = Math.max(...values);
  document.getElementById("result").innerHTML = `Maior elemento: ${maior}`;
}

function calcularMenor() {
  const values = getInputValues();
  const menor = Math.min(...values);
  document.getElementById("result").innerHTML = `Menor elemento: ${menor}`;
}

// Fibonacci相关函数后续再完善
function fibonacci() { }

额外说明 #

• 把获取输入值的逻辑抽成了独立函数，让代码更简洁易维护；
• 将输入值转为数字，避免字符串比较带来的逻辑错误；如果需要处理非数字输入，可以添加提示用户输入有效数字的逻辑；
• 使用模板字符串简化结果文本的拼接，可读性更强。

内容的提问来源于stack exchange，提问作者Paulo Henrique Rodrigues Grund