如何将表单输入值传入斐波那契生成器并通过document.write输出结果

实现步骤及修改后代码 #

你只需要做3处调整即可实现需求：

1. 给展示结果的h1标签添加唯一id，方便动态更新内容，替换掉原有的document.write逻辑
2. 在表单提交事件中读取输入框的数值，做合法性校验
3. 调用斐波那契生成函数后将结果渲染到展示区域

完整可运行代码如下：

</head>
<body>
<div class="background-color">
<h1>Welcome to the Fibonacci Generator!</h1>

<h2>Please input a number between 1 and 10</h2>

<div class="container">
<form class="pure-form">
 <input class="numberInputBox" autocomplete="off" id="name"
type="number" placeholder="            Enter # Here!" />
<button type="submit" class="btn btn-success heighttext">GO! 
</button>
</form>

<script type="text/javascript">
// 斐波那契生成函数挪到全局作用域，方便提交事件调用
function fibonacciGenerator(n) {
  var seq = [0, 1];
  for (var i = 2; i < n; i++) {
    seq.push(seq.at(-1) + seq.at(-2));
  }
  seq.length = n;
  return seq;
}

var nameInput = document.getElementById('name');
// 获取结果展示元素
var resultEl = document.getElementById('fibResult');

document.querySelector('form.pure-form').addEventListener('submit',
function (e) {
  e.preventDefault();
  // 读取输入值并转为数字类型
  var inputNum = parseInt(nameInput.value);
  // 校验输入合法性
  if(isNaN(inputNum) || inputNum < 1 || inputNum > 10){
    resultEl.textContent = "请输入1-10之间的有效数字";
    return;
  }
  // 生成序列并格式化展示
  var fibSeq = fibonacciGenerator(inputNum);
  resultEl.textContent = fibSeq.join(', ');
});

</script>
</div>
<div class="display">
<h1 id="fibResult"></h1>
 </div>
 </div>
</body>
</html>
<footer>
<div class="footer">
</div>
</footer>

调整说明 #

• 移除了原来写在h1标签内的script和document.write逻辑，避免页面加载时就渲染固定的10位序列
• 修复了原代码中表单选择器换行导致的选择器无效问题
• 增加了输入校验逻辑，输入非数字、超出1-10范围时会提示错误
• 最终生成的序列用逗号分隔展示，可读性更好

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