如何将用户输入添加到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> <script> getQuote(); </script>到html。

这一切都很好。

我似乎无法弄清楚的部分是接受用户输入并将其添加到jQuery数组中。 我使用的是contenteditable div而不是<input>因为我希望它具有多行文本并有一个字符限制，据我所知，只能使用contenteditable div来完成（根据我所做的研究时间，我可能错了）。

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

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

因此，重申一下，我想接受用户输入并将其添加到JavaScript数组中。 我搜寻了stackoverflow和inet，但没有任何反应。 请帮忙！

更新： Arvind做对了。 我还有很多东西要学习，而且似乎我需要阅读有关本地存储和cookie的信息。 我还需要使用PHP将句子保存在服务器上。 谢谢所有回答的人！

Answer 1

问题是document.getElementsByClassName("input")为您提供了一个NodeList ，而不仅仅是一个html元素。 因此，如果执行此document.getElementsByClassName("input").value ，则最终quotes为[undefined, undefined ... undefined] 。 假设您有一个input了类名的元素，则使用索引0 。 同样，如您所声明的，您正在使用具有contenteditable属性的div ，则可以尝试使用它。 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' /> 

PS为了保留旧的报价，您可以使用cookie，localStorage等。

这些“引号”是否保存在本地？

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

Answer 2

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

应该

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

编辑：使用内容可编辑div，您需要改用text() 。 这是一个小提琴的例子。 https://jsfiddle.net/

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的元素相混淆）

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

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