使用jQuery和Javascript将包含用户输入内容的函数数组返回到UI中

Question

我已经创建了一个基本的应用程序，它具有一个工作函数数组，该函数数组应该接受用户的输入，并返回一个数组，将用户的输入作为数组中的最后一个数字--在这个过程中用字符串替换某些整数。

当Iconsole.log类似RangeofNumbers((0,13))；时，它显示所有功能正常。然而，我试着搜索所有的东西，查看MDN，坐在电脑前数小时试图弄清楚如何将我的函数实现到UI中，这样当用户点击submit时它就会打印出来，但我就是弄不清楚下一步该怎么做，或者我做错了什么。

Console logging它可以工作，但是我不明白为什么用户的输入没有被自动推到数组的末尾。如果有人能帮助这位初学者，那将不胜感激。谢谢！

下面是我正在努力处理的脚本文件中的代码块：

null

function rangeOfNumbers(start, numberInput) {
  let rangeArray = [];
  for (let i = start; i <= numberInput; i++) {
    rangeArray.push(i + "");
  }
  return rangeArray.map(x => x.includes("3") ? "Won't you be my neighbor?" : x.includes("2") ? "Boop" : x.includes("1") ? "Beep" : x);
}

// This is where I am having issues. Html matches up so I know it isn't that.
$(document).ready(function() {
  const numberInput = $("#numberInput").val();
  
  $("#formRobo").submit(function(event) {
    event.preventDefault();
    $("#result").rangeOfNumbers(0, numberInput);
  });
})

null

Answer 1

您的代码中有两个问题。

首先，rangeofNumbers()不是jQuery函数。您自己定义了它，因此需要独立于jQuery调用它，并将结果设置为显示在#result元素中。假设它是div使用text()，或者如果它是窗体控件，则使用val()。

第二个问题是，当页面加载时，您只读取#numberinput的值，因此它总是默认值。要读取用户在提交表单之前输入的值，需要在submit事件处理程序中移动该行。

试试看：

null

function rangeOfNumbers(start, numberInput) {
  console.log(numberInput);
  let rangeArray = [];
  for (let i = start; i <= numberInput; i++) {
    rangeArray.push(i + "");
  }
  return rangeArray.map(x => x.includes("3") ? "Won't you be my neighbor?" : x.includes("2") ? "Boop" : x.includes("1") ? "Beep" : x);
}

// This is where I am having issues. Html matches up so I know it isn't that.
$(document).ready(function() {  
  $("#formRobo").submit(function(event) {
    event.preventDefault();
    
    const numberInput = $("#numberInput").val();
    $("#result").text(rangeOfNumbers(0, numberInput));
  });
})

html lang-html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formRobo">
  <input type="text" id="numberInput" />
  <button type="submit">Submit</button>
</form>

<div id="result"></div>