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

我正在学习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数组中。我使用contenteditablediv而不是<input>，因为我希望它有多行文本并有字符限制，据我所知，这只能用一个可编辑内容的div来完成(根据我当时的研究，我可能错了(。

我环顾四周，尝试了很多(如果不是所有的话(关于如何做到这一点的例子，但都没有奏效。如果有帮助的话，这是我尝试的最后一种方法：

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

因此，重申一下，我想接受用户输入并将其添加到JavaScript数组中。我搜索了stackoverflow和interet，但什么都没用。请帮忙！

更新：阿文德做对了。我还有很多东西要学，而且我似乎需要了解本地存储和cookie。我还需要使用PHP将句子保存在服务器上。感谢所有回答的人！

问题是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' />

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

这些"报价"是否保存在本地？

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

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

应该是

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

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

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"类名，而是使用其他类名，因为这可能会在以后的某个时候混淆其他类名(被命名为input的元素混淆(

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

注意：我还假设元素是具有.value的输入类型，因为它没有提供(标记(

相关内容

最新更新

热门标签：