如何將用戶輸入添加到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的輸入類型，因為未提供該元素（標記）