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>，因为我希望它有多行文本并且有字符限制，据我所知，只能用一个可信的div来完成（根据对于我当时所做的研究，我可能错了。）

我环顾四周，尝试了许多（如果不是所有）我发现的如何做到的例子，并且没有一个能够奏效。这是我试过的最后一种方法，如果它有帮助：

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

因此，重申一下，我想获取用户输入并将其添加到JavaScript数组中。我已经搜索了stackoverflow和interet但没有任何工作。请帮忙！

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

Answer 1

问题是document.getElementsByClassName("input")为您提供NodeList，而不只是一个html元素。因此，如果您执行此操作document.getElementsByClassName("input").value，则quotes将[undefined, undefined ... undefined]作为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('')); }); });

试试这个例子。

＆＃13;

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

＆＃13;

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

＆＃13;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD><TITLE>Unauthorized</TITLE></HEAD>
  <BODY>
    <H1>Unauthorized</H1>
    WEBrick::HTTPStatus::Unauthorized
    <HR>
    <ADDRESS>
     WEBrick/1.3.1 (Ruby/2.2.0/2014-12-25) at
     192.168.1.1:1234
    </ADDRESS>
  </BODY>
</HTML>

＆＃13;

<强> P.S。为了保留旧的引号，您可能使用cookie，localStorage等。

这些＆＃34;报价＆＃34;在当地被保存？

是的，要在不同浏览器访问的几个用户之间共享它，你必须使用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()。这是一个小例子。 MSDN

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

注意：建议不要使用“输入”类名并使用其他名称，因为这可能会在以后某些时候让其他人感到困惑（被名为输入的元素搞糊涂）

我还添加了段落标记，因为它会为输入文本提供一致的模式。然而我的假设是。

注意我还假设元素是一个带.value的输入类型，因为没有提供（标记）

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

3 个答案: