如何将用户输入添加到 JavaScript 数组

Question

我正在学习 JavaScript 和 jQuery，如果这听起来幼稚或显而易见，我们深表歉意。我开始了我认为是一个相当简单的练习项目，并希望在此过程中学到一些东西。

我想做的是：用户输入一个句子并点击提交按钮。该句子被添加到人们提交的其他句子列表中（最好在单独的文件中，最好加密，但不是必需的）。然后，该网站从列表中随机抓取一个句子并显示出来。

我不是在问如何构建所有这些。我已经将大部分内容放在一起，但我将其包含在这里以供参考。

我有一个包含引号数组的单独 javascript 文件。

var quotes=new Array();
quotes[0]="<p>Quote 1</p>";
quotes[1]="<p>Quote 2</p>";
quotes[2]="<p>Quote 3</p>";
quotes[3]="<p>Quote 4</p>";
quotes[4]="<p>Quote 5</p>";
quotes[5]="<p>Quote 6</p>";
quotes[6]="<p>Quote 7</p>";

然后我用这个随机显示一个：

function getQuote(){
            var thisquote=Math.floor(Math.random()*(quotes.length));
            document.write(quotes[thisquote]);
          }

并将 <script> getQuote(); </script> 添加到 html。

一切正常。

我似乎无法弄清楚的部分是获取用户输入并将其添加到 jQuery 数组。我使用 contenteditable div 而不是 <input> 因为我希望它有多行文本并且有字符限制，据我所知只能用contenteditable div（根据我当时所做的研究，我可能是错误的）。

我环顾四周并尝试了很多（如果不是全部）我找到的关于如何执行此操作的示例，并且 none 个成功了。这是我最后尝试的方法，如果有帮助的话：

$(".submit").click(function() {
    quotes[quotes.length] = document.getElementsByClassName("input").value;
});

所以，重申一下，我想获取用户输入并将其添加到 JavaScript 数组中。我搜索了 Whosebug 和互联网，但没有任何效果。请帮忙！

更新： Arvind 做对了。我还有很多东西要学，看来我需要阅读 localstorage 和 cookies。我还需要使用 PHP 将句子保存在服务器上。感谢所有回答的人！

Answer 1

$(".submit").click(function() {
    quotes[quotes.length] = document.getElementsByClassName("input").value;
});

应该是

$(".submit").click(function() {
    quotes.push(document.getElementsByClassName("input").text());
});

编辑：如果内容可编辑 div，您需要改用 text()。这是一个示例 fiddle。 https://jsfiddle.net/

Answer 2

问题是 document.getElementsByClassName("input") 给你一个 NodeList 而不是一个 html 元素。所以如果你这样做 document.getElementsByClassName("input").value，你最终会 quotes 成为 [undefined, undefined ... undefined]。假设您有单个元素 class 名称 input，请使用索引 0。另外，正如您所说的那样，您正在使用 div 和属性 contenteditable，您可以试试这个。 document.getElementsByClassName("input")[0].innerHTML

试试这个例子。

var quotes = localStorage.getItem('quotes'); //get old, if any, gives you string
quotes = quotes ? [quotes] : []; // if got quotes then make it as array else make new array

$(function() {
  var quote = $('#quote'); //get the quote div
  quote.html(quotes.join('') || quote.html()); //set the default text
  $('#btn').on('click', function(e) {
    quotes.push(quote.html());
    localStorage.setItem('quotes', quotes.join('')); //save the quotes
    alert(quotes.join(''));
  });
});

#quote {
  border: 1px solid grey;
  height: 100px;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div contenteditable='' id='quote'>
  <ol>
    <li>Quote 1</li>
    <li>Quote 2</li>
  </ol>
</div>
<input type='button' id='btn' value='Submit' />

P.S. 为了保留旧报价，您可能会使用 cookie、localStorage 等。

Are these "quotes" being saved locally?

是的，要在不同浏览器访问的多个用户之间共享，你必须用服务器脚本保存它，如 PHP、Java、ASP 等。在这里你可以使用 ajax，如果你想避免在提交时重新加载页面，否则你可以使用表单提交。

Answer 3

var quotes=[];// better
// function to add to array
function addQuote(myquote){
    quotes.push('<p>'+myquote+'</p>');
}

addQuote("Quote 1");
addQuote("Quote 2");
addQuote("Quote 3");
addQuote("Quote 4");
addQuote("Quote 5");
addQuote("Quote 6");
addQuote("Quote 7");
addQuote("Quote 8");

$(".submit").on('click',function() {
    addQuote(document.getElementsByClassName("input")[0].value);
});

注意：建议不要使用 "input" class 名称并使用其他名称，因为这可能会在以后的某个时候让其他人感到困惑（被名为 input 的元素混淆）

我还添加了段落标签，因为这将为您的输入文本提供一致的模式。然而，我的假设。

注意我还假设该元素是具有 .value 的输入类型，因为未提供（标记）

如何将用户输入添加到 JavaScript 数组

How to add user input to a JavaScript array

javascript

arrays

jquery

user-input

input