CODEWITHSUNDEEP
javascriptjqueryarraysinputuser-input
Manu
Manu

Reputation: 319

How to add user input to a JavaScript array

I am in the process of learning JavaScript and jQuery, so apologies if any of this sounds naive or obvious. I started what I thought was a fairly simple project to practice and hopefully learn something in the process.

What I want to do is this: the user inputs a sentence and hits a submit button. The sentence gets added to a list of other sentences submitted by people (preferably on a separate file, preferably encrypted, but not necessary). Then, the website grabs a random sentence from the list and displays it.

I am not asking on how to build all of this. I have already put most of it together, but I am including it here for reference.

I have a separate javascript file with the array of quotes.

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>";

Then I randomly display one using this:

function getQuote(){
            var thisquote=Math.floor(Math.random()*(quotes.length));
            document.write(quotes[thisquote]);
          }

And adding <script> getQuote(); </script> to the html.

This all works fine.

The part I cannot seem to figure out is taking user input and adding it to the jQuery array. I am using a contenteditable div instead of an <input> because I want it to have multiple lines of text and have a character limit, which as far as I know can only be done with a contenteditable div (according to the research I did at the time, I may be wrong).

I have looked around and tried many if not all the examples I found of how to do this, and none of them worked. This is the last method I tried, if it helps:

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

So, to reiterate, I want to take user input and add it to a JavaScript array. I have scoured stackoverflow and the interet but nothing has worked. Please help!

UPDATE: Arvind got it right. I still have a lot to learn, and it seems I need to read up on localstorage and cookies. I will also need to use PHP to save the sentences on the server. Thank you to all who answered!

Upvotes: 2

Views: 1621

Answers (3)

user2575725
user2575725

Reputation:

Problem is document.getElementsByClassName("input") gives you a NodeList and not just a single html element. So if you do this document.getElementsByClassName("input").value, you will end up quotes as [undefined, undefined ... undefined]. Assuming you have single element with the class name input, go with index 0. Also as you stated that you are using div with attribute contenteditable, you may try this instead. document.getElementsByClassName("input")[0].innerHTML

Try this example.

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. In order to preserve the old quotes you may possibly use cookie, localStorage, etc.

Are these "quotes" being saved locally?

Yes, to share it among several users visiting by different browsers, you have to save it with the server script like PHP, Java, ASP, etc. Here you can either use ajax, if you wana avoid page reload on submit, else you can go for form submit.

Upvotes: 1

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

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

NOTE: suggest NOT using the "input" class name and use some other one as that might be confusing to others at some point later (confused by element named input)

I also added the paragraph tags as that would provide a consistent pattern for your input text. Assumption on my part however.

NOTE I also assume that the element IS an input type with the .value since that is NOT provided (the markup)

Upvotes: 0

Sean
Sean

Reputation: 551

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

should be 

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

EDIT: With a content editable div you need to use text() instead. Here is an example fiddle. https://jsfiddle.net/

Upvotes: 0

Related Questions