javascript - 如何将用户输入添加到 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 来完成(根据我当时所做的研究，我可能是错的)。

我环顾四周并尝试了很多(如果不是全部的话)我找到的关于如何做到这一点的例子，但没有一个奏效。这是我最后尝试的方法，如果有帮助的话:

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

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

更新:Arvind 做对了。我还有很多东西要学，看来我需要阅读 localstorage 和 cookies。我还需要使用 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' />

附言 为了保留旧报价，您可能会使用 cookie、localStorage 等。

Are these "quotes" being saved locally?

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