Eloquent JS Exercise (Ch.18 Q. 2) - javascript

I was hoping someone can help me figure out what I'm doing wrong... There's this exercise in the Eloquent JS book that asks you to write some code that can suggest words/values to users as they type... The code I've written is below. What happens is that when I run the code, the div element's text content changes to the wrong value. Specifically, it's set to a string of all the elements inside the array 'terms'. I really cant figure out why this happens!
<input type="text" id="field">
<div id="suggestions" style="cursor: pointer"></div>
<script>
// Builds up an array with global variable names, like
// 'alert', 'document', and 'scrollTo'
var terms = [];
for (var name in window)
terms.push(name);
var input = document.querySelector('input');
var div = document.querySelector('#suggestions');
input.addEventListener("input", function(event){
var last = input.value.lastIndexOf(" ")+1;
var check = input.value.slice(last);
var reg = new RegExp(check);
for (var i=0; i<terms.length; i++) {
if (reg.test(terms[i])) {
var text = document.createTextNode(terms[i]);
div.appendChild(text)};
};
})
</script>

I guess you forgot to clean the div before each change in the input.
I also added a space after each word to make the output more readable.
// Builds up an array with global variable names, like
// 'alert', 'document', and 'scrollTo'
var terms = [];
for (var name in window)
terms.push(name);
var input = document.querySelector('input');
var div = document.querySelector('#suggestions');
input.addEventListener("input", function(event){
div.innerHTML = '';
var last = input.value.lastIndexOf(" ")+1;
var check = input.value.slice(last);
var reg = new RegExp(check);
for (var i=0; i<terms.length; i++) {
if (reg.test(terms[i])) {
var text = document.createTextNode(terms[i] + ' ');
div.appendChild(text)};
};
})
<input type="text" id="field">
<div id="suggestions" style="cursor: pointer"></div>
With this code, you will display the name of the properties from the window object that contains the last word from the input. Try it writting "window location document". Is it what you are looking for?

Related

Textarea to variable: Spacing

I'm taking the content of a textarea and saving it in a variable. But I notice that when I save the content, the variable ignores the spacing (new lines). How do I fix this. I want the variable to store the structure of the text, with all the new lines and tabs. My code in which I save the content from the textarea is below:
let content = document.getElementById('content').value
The whole function is below:
function mail(){
var options = document.getElementById('users').options
let content = document.getElementById('content').value
var emails = []
var regex = /\*user\*/gi
for(var i = 2; i < options.length; i++){
emails.push(options[i].innerHTML)
content = content.replace(regex, emails[i-2])
window.open(`mailto:${emails[i-2]}?subject=To ${emails[i-2]}&body=${content}`)
}
}
Thanks!!! Any help is appreciated!
Actually, spaces and new lines are exists but because you put your content in html (body{}), they are invisible.
some solutions:
let content = document.getElementById('content').value.replace(/\n/g,"<br/>").replace(/ ( +)/g,function(a,b){var s="", i=0; for(;i<b.length;i++)s+=" "; return " "+s;});
or this:
let content = "<pre>"+document.getElementById('content').value+"</pre>"
or this:
let content = "<div style='white-space: pre'>"+document.getElementById('content').value+"</div>"
The above solutions were for when the body is html.
Edit:
I guess this will solve your problem:
let content = escape(document.getElementById('content').value);
The variable does contain new lines if new lines are entered in the textarea. Keep in mind that textarea will wrap the text to fit it so if you see wrapped text, that doesn't mean there is a new line character in the text.
<textarea id="content"></textarea>
<input type="button" value="submit" onclick="msg()">
<script>
function msg() {
let message = document.getElementById('content').value;
alert(message);
}
</script>

Display JavaScript Array Elements inside Div

There's a textarea in the webpage to enable user to add address. User may enter 'n' number of addresses by clicking on the Add Address button. When user clicks on the Display Address button, all the addresses entered should be displayed inside the "result" div tag as per following format:
Address 1
Address entered by user
Address 2
Address entered by user
.....
Here's the HTML code
<div id="body" align="left">
<h2>Address Details</h2>
Enter the Address : <textarea id="address"></textarea><br>
<button id="add" onclick="addAddress();">Add Address</button>
<button id="display" onclick="displayAddress();">Display Address</button>
</div>
<div id="result" align="right"></div>
Here's the JS function to accept the address and store it in an array:
var address = [];
function addAddress(){
var addr = document.getElementById("address");
if(addr.value.replace(/^\s+|\s+$/gm,'') !=="") {
address.push(addr.value);
addr.value = "";
}
}
And here's the function to display the address inside the result div in the specified format (which does not work)
function displayAddress(){
var display = [];
var addrno = [];
var result = document.getElementById("result");
for(var i=0; i<address.length; i++){
display[i] = address[i];
addrno[i] = "Address "+(i+1);
}
result.innerHTML = addrno[i]+"<br>"+display[i]+"<br>";
}
Any help would be greatly appreciated.
Hm, if I understand your question correctly, you could try doing something like this:
function displayAddress(){
var display = [];
var addrno = [];
var result = document.getElementById("result");
for(var i=0; i<address.length; i++){
display[i] = address[i];
addrno[i] = "Address "+(i+1);
result.innerHTML += addrno[i]+"<br>"+display[i]+"<br>";
}
}
All I changed was move result.innerHTML += addrno[i]+"<br>"+display[i]+"<br>"; inside your for loop so it can access the variable i uppon each itteration and changed it so it added the string addrno[i]+"<br>"+display[i]+"<br>"; to the DOM by using += on result.innerHTML rather than = (so it doesn't override it, rather it appends to it)

Modify variable from input and place in new div based on input variable

This is related to my last questions, but that already had alot of answers so I did not want to modify it with more stuff to avoid confusion.
I can take the input from the input text with the id 'test', and I can display it on the div labeled 'result', but I am not able to modify the output to div
function createLinks()
{
var input = document.getElementById('test')
if(str.indexOf("VALUE")>=0){
var lin = "something";
}
else {
var lin = "somethingelse";
}
var div = document.getElementById('result');
div.innerHTML = lin.value;
}
The HTML is working currently as follows:
<input type="text" id="test" size="16" title="Coming Soon" onkeypress="createLinks()"/>
<input type="submit" style="margin-left: 10px;" value="Search" class="button1"/>
<div id="result"></div>
I work with mainly CGI and have very limited knowledge of JS so I am probably missing something simple or this plain wont work. Thanks for the help in advance.
I fixed your code to what I think you wanted:
function createLinks()
{
var lin;
var input = document.getElementById('test');
if(input.value.indexOf("VALUE")>=0){
lin = "something";
}
else {
lin = "somethingelse";
}
var div = document.getElementById('result');
div.innerHTML = lin;
}
What was wrong was that:
[1] str was not defined
[2] lin was not globally defined, so you couldn't access it.
I updated the code so that it will make result say something if the textbox has VALUE typed in it and somethingelse if it doesn't, and that you can also press the Search button instead of pressing a key.
Try This: str not defined and lin is the value.
function createLinks()
{
var input = document.getElementById('test')
if(input.value.indexOf("VALUE")>=0){
var lin = "something";
}
else {
var lin = "somethingelse";
}
var div = document.getElementById('result');
div.innerHTML = lin;
}

how can I call tab key event in javascript

Here is my simple data
John Smith Individual 010987654
I have three textboxes and the above data will automatically insert in the first textbox of my web page.
My problem is
How can I make as soon as data is inserted in the textbox (means when textbox’s onchange event is fired)
First, javascript will find ‘tab’ space in this string
Second, if find ‘tab’ space in the string, javascript will press ‘tab’ key and insert data in the another text box.
Here's a plain old DOM-0 JavaScript solution, just for fun.
document.getElementById('the_form').onchange = function() {
var field = this[0];
var parts = field.value.split('\t');
for (var i = 0; field = this[i]; i++) {
field.value = parts[i] || '';
}
}
http://jsfiddle.net/vKaxP/
I thought you want to split those texts into different textboxes, so I got something like:
$("#a").change(function(){
var s = $(this).val();
if (s.match(/\t+/)) {
var a = s.split(/\t+/);
$('#a').val(a[0]);
$('#b').val(a[1]);
$('#c').val(a[2]);
}
});
if you type a b c into the first input box, press tab or enter, b and c would appear into other textboxes, repectively.
I use \s(space) for test in jsfiddle. You could just change it to \t for tab.
Here is prototype of what you need to do.
HTML:
<div>
<input id="a" />
</div>
<div>
<input id="b" />
</div>
JavaScript:
$('#a').on('change', function () {
var value = $(this).val();
// Test if string has a tab:
if (/\t/.test(value)) {
// Just set the value of the other text box
// And set focus:
// Using jQuery that would be:
$('#b').val(value).focus();
}
});
Working demo: http://jsfiddle.net/tkirda/XmArP/
If I correctly understand the question as "The server puts all the data into one field, tab separated, and I want to split it up into several textfields", then try this:
On load:
var fields = [$("#firstField"), $("#secondField"), $("#thirdField")];
var data = fields[0].val().split(/\t/);
for (var i = 0; i < 3; i++) {
fields[i].val(data[i]);
}

storing user input in array

I need to do the following (I'm a beginner in programming so please excuse me for my ignorance): I have to ask the user for three different pieces of information on three different text boxes on a form. Then the user has a button called "enter"and when he clicks on it the texts he entered on the three fields should be stored on three different arrays, at this stage I also want to see the user's input to check data is actually being stored in the array. I have beem trying unsuccessfully to get the application to store or show the data on just one of the arrays. I have 2 files: film.html and functions.js. Here's the code. Any help will be greatly appreciated!
<html>
<head>
<title>Film info</title>
<script src="jQuery.js" type="text/javascript"></script>
<script src="functions.js" type="text/javascript"></script>
</head>
<body>
<div id="form">
<h1><b>Please enter data</b></h1>
<hr size="3"/>
<br>
<label for="title">Title</label> <input id="title" type="text" >
<br>
<label for="name">Actor</label><input id="name" type="text">
<br>
<label for="tickets">tickets</label><input id="tickets" type="text">
<br>
<br>
<input type="button" value="Save" onclick="insert(this.form.title.value)">
<input type="button" value="Show data" onclick="show()"> <br>
<h2><b>Data:</b></h2>
<hr>
</div>
<div id= "display">
</div>
</body>
</html>
var title=new Array();
var name=new Array();
var tickets=new Array();
function insert(val){
title[title.length]=val;
}
function show() {
var string="<b>All Elements of the Array :</b><br>";
for(i = 0; i < title.length; i++) {
string =string+title[i]+"<br>";
}
if(title.length > 0)
document.getElementById('myDiv').innerHTML = string;
}
You're not actually going out after the values. You would need to gather them like this:
var title = document.getElementById("title").value;
var name = document.getElementById("name").value;
var tickets = document.getElementById("tickets").value;
You could put all of these in one array:
var myArray = [ title, name, tickets ];
Or many arrays:
var titleArr = [ title ];
var nameArr = [ name ];
var ticketsArr = [ tickets ];
Or, if the arrays already exist, you can use their .push() method to push new values onto it:
var titleArr = [];
function addTitle ( title ) {
titleArr.push( title );
console.log( "Titles: " + titleArr.join(", ") );
}
Your save button doesn't work because you refer to this.form, however you don't have a form on the page. In order for this to work you would need to have <form> tags wrapping your fields:
I've made several corrections, and placed the changes on jsbin: http://jsbin.com/ufanep/2/edit
The new form follows:
<form>
<h1>Please enter data</h1>
<input id="title" type="text" />
<input id="name" type="text" />
<input id="tickets" type="text" />
<input type="button" value="Save" onclick="insert()" />
<input type="button" value="Show data" onclick="show()" />
</form>
<div id="display"></div>
There is still some room for improvement, such as removing the onclick attributes (those bindings should be done via JavaScript, but that's beyond the scope of this question).
I've also made some changes to your JavaScript. I start by creating three empty arrays:
var titles = [];
var names = [];
var tickets = [];
Now that we have these, we'll need references to our input fields.
var titleInput = document.getElementById("title");
var nameInput = document.getElementById("name");
var ticketInput = document.getElementById("tickets");
I'm also getting a reference to our message display box.
var messageBox = document.getElementById("display");
The insert() function uses the references to each input field to get their value. It then uses the push() method on the respective arrays to put the current value into the array.
Once it's done, it cals the clearAndShow() function which is responsible for clearing these fields (making them ready for the next round of input), and showing the combined results of the three arrays.
function insert ( ) {
titles.push( titleInput.value );
names.push( nameInput.value );
tickets.push( ticketInput.value );
clearAndShow();
}
This function, as previously stated, starts by setting the .value property of each input to an empty string. It then clears out the .innerHTML of our message box. Lastly, it calls the join() method on all of our arrays to convert their values into a comma-separated list of values. This resulting string is then passed into the message box.
function clearAndShow () {
titleInput.value = "";
nameInput.value = "";
ticketInput.value = "";
messageBox.innerHTML = "";
messageBox.innerHTML += "Titles: " + titles.join(", ") + "<br/>";
messageBox.innerHTML += "Names: " + names.join(", ") + "<br/>";
messageBox.innerHTML += "Tickets: " + tickets.join(", ");
}
The final result can be used online at http://jsbin.com/ufanep/2/edit
You have at least these 3 issues:
you are not getting the element's value properly
The div that you are trying to use to display whether the values have been saved or not has id display yet in your javascript you attempt to get element myDiv which is not even defined in your markup.
Never name variables with reserved keywords in javascript. using "string" as a variable name is NOT a good thing to do on most of the languages I can think of. I renamed your string variable to "content" instead. See below.
You can save all three values at once by doing:
var title=new Array();
var names=new Array();//renamed to names -added an S-
//to avoid conflicts with the input named "name"
var tickets=new Array();
function insert(){
var titleValue = document.getElementById('title').value;
var actorValue = document.getElementById('name').value;
var ticketsValue = document.getElementById('tickets').value;
title[title.length]=titleValue;
names[names.length]=actorValue;
tickets[tickets.length]=ticketsValue;
}
And then change the show function to:
function show() {
var content="<b>All Elements of the Arrays :</b><br>";
for(var i = 0; i < title.length; i++) {
content +=title[i]+"<br>";
}
for(var i = 0; i < names.length; i++) {
content +=names[i]+"<br>";
}
for(var i = 0; i < tickets.length; i++) {
content +=tickets[i]+"<br>";
}
document.getElementById('display').innerHTML = content; //note that I changed
//to 'display' because that's
//what you have in your markup
}
Here's a jsfiddle for you to play around.

Categories

Resources