使用 jQuery 和 Javascript 将带有用户输入内容的函数数组返回到 UI

Posted 2023-05-09

【中文标题】使用 jQuery 和 Javascript 将带有用户输入内容的函数数组返回到 UI

【英文标题】：Returning a function array with user's input contents into the UI using jQuery and Javascript

【发布时间】：2021-07-06 19:22:14

【问题描述】：

我创建了一个基本应用程序，其中包含一个工作函数数组，该数组应该接受用户的输入，并返回一个数组，其输入作为数组中的最后一个数字——在此过程中用字符串替换某些整数。

当我 console.log rangeOfNumbers((0,13)); 之类的东西时，它显示一切正常。但是，我尝试用谷歌搜索所有内容，查看 MDN，并在我的电脑前坐了好几个小时，试图弄清楚如何在 UI 中实现我的功能，以便在用户点击提交时打印出来，但我就是不知道要做什么下一步做或我做错了什么。

控制台记录它可以工作，但我不明白为什么用户的输入没有使用该函数自动推送到数组的末尾。如果有人可以帮助这个初学者，将不胜感激。谢谢！

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

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);
  );
)

【参考方案1】：

您的代码中有两个问题。

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

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

试试这个：

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));
  );
)

<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>

【讨论】：

谢谢罗里！我不敢相信它是那么简单的修复。非常感激。我接受了你的回答:)

没问题，很高兴为您提供帮助

【参考方案2】：

你想设置元素的文本。

$("#result").text(rangeOfNumbers(0, +$("#numberInput").val()));

如果你想让你的函数在jQuery元素上被调用，你可以在jQuery.fn（jQuery.prototype）上设置它。

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);


$(document).ready(function() 
  $("#formRobo").submit(function(event) 
    event.preventDefault();
    $("#result").text(rangeOfNumbers(0, +$("#numberInput").val()));
  );
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formRobo">
<input id="numberInput" type="number"/>
<button>Submit</button>
</form>
<p id="result"></p>

【参考方案3】：

您需要使用 jQuery 实例的text 方法。 你能试试这个吗：

$("#formRobo").submit(function(event) 
    event.preventDefault();
    $("#result").text(rangeOfNumbers(0, numberInput));
);