When I'm Trying to Store Array using local Storage it's giving me not the desired Result Why ?..
Here is the code that i've written
<html>
<head>
<script type="text/javascript">
var Array=[];
function addToList(){
var Name=document.getElementById('Name');
Array.push(Name.value);
if(window.localStorage){
localStorage.setItem("name",Name);
}
}
</script>
<title>Local Storage Demo</title>
</head>
<body>
<h1>Local Strorage</h1>
<div>
<input type="text" id="Name" name="Name"> </input>
<button onclick="addToList()">Add</button>
</div>
</body>
</html>
This has already so many answers on the Stack Overflow. Learn to Search things Properly anyway
You need to use JSON.stringify. That turns an object in to a JSON text and stores that JSON text in a string.
And also while retrieving value you need to parse it using JSON.parse which turns json text back into an object.
Here is one sample code that will help you
<html>
<head>
<script type="text/javascript">
var carArray=[];
function addToListCarArray(){
var newCarName=document.getElementById('carName');
carArray.push(newCarName.value);
if(window.localStorage){
localStorage.setItem("carNameKey",JSON.stringify(carArray));
}
}
function readCarNames(){
if(window.localStorage){
var carNames=localStorage.getItem("carNameKey");
carNames = JSON.parse(carNames);
for (i=0;i<carNames.length;i++){
alert(carNames[i]);
}
}
}
</script>
<title>Local Storage Demo</title>
</head>
<body>
<h1>Demo of Local Strorage</h1>
<div>
<input type="text" id="carName" name="carName"> </input>
<button onclick="addToListCarArray()">Add Car</button>
<button onclick="readCarNames()">Display</button>
<p id="displayCarNames"></p>
</div>
</body>
Related
I'd like to add a function to this code that will display the difference between the values calculated by the other two currently implemented functions but I'm unsure how to implement it.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
</head>
<body>
<div>
<header>
</header>
<main>
<p>Your current daily goal is:<span id="UserGoal"></span></p>
<br>
<p>Your current calories eaten for the day:<span id="EatenCalories">0</span></p>
<br>
<p>Remaining calories for today:<span id="RemainingCalories"></span></p>
<label for="Goal">Please enter your daily Goal</label>
<input type="number" id="Goal" name="Goal">
<input type="submit" onclick="updateGoal();"/>
<br>
<input type="number" id="addCalories" name"addCalories">
<input type="button" value="Update Calories" onclick="addCalories();"/>
</main>
<script>
function updateGoal(){
this.UserGoal = document.getElementById("Goal").value;
document.getElementById("UserGoal").innerHTML = this.UserGoal;
}
function addCalories(){
if (this.EatenCalories = ''){ //made 1 = sign, made check ''
this.EatenCalories = document.getElementById("addCalories").value;
document.getElementById("EatenCalories").innerHTML = this.EatenCalories;
}
else{
this.EatenCalories = document.getElementById("EatenCalories").innerText;
parseFloat(EatenCalories);
this.Calories=document.getElementById("addCalories").value;
this.Result=parseFloat(this.Calories)+parseFloat(this.EatenCalories);
document.getElementById("EatenCalories").innerHTML = this.Result;
}
}
</script>
</div>
</body>
</html>
Both the functions store their results in HTML elements by updating their innerHTML
Your new function can use these values to calculate the difference and put the result into another HTML element’s innerHTML to display it.
For example,
<div id=“difference”></div>
function calcDifference() {
document.getElementById("difference").innerHTML = document.getElementById("EatenCalories").innerHTML - document.getElementById("UserGoal").innerHTML;
}
This is the method which I tried. I've added a feedback just to test out if the JavaScript variable siteName contains the value from the HTML textbox value but it reflected "[object HTMLInputElement]" instead. Any idea why?
<!DOCTYPE html>
<html>
<head>
<title>Storing HTML value into Javascript local storage</title>
</head>
<body>
<h1 id="2ndid">Hello</h1>
<input type="text" id="firstid">
<button onclick="myFunction()">LocalStorage</button>
<button onclick="myFunction2()">Feedback</button>
<script type="text/javascript">
var siteName = document.getElementById('firstid');
function myFunction() {
localStorage.setItem('store1', siteName);
}
function myFunction2() {
document.getElementById("2ndid").innerHTML = siteName;
}
</script>
</body>
</html>
You have to use the value property to get the actual text from the input. Otherwise it will return the reference of the input text field. The reference is type of HTMLInputElement which has a value property holding actual data entered in the text field.
<!DOCTYPE html>
<html>
<head>
<title>Storing HTML value into Javascript local storage</title>
</head>
<body>
<h1 id="2ndid">Hello</h1>
<input type="text" id="firstid">
<button onclick="myFunction()">LocalStorage</button>
<button onclick="myFunction2()">Feedback</button>
<script type="text/javascript">
var siteName;
function myFunction() {
siteName = document.getElementById('firstid').value;
localStorage.setItem('store1', siteName);
}
function myFunction2() {
document.getElementById("2ndid").innerHTML = siteName;
}
</script>
</body>
</html>
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
Use the value of the input element to retrieve from value form it, or else you will be getting an object.
document.getElementById("2ndid").innerHTML = siteName.value;
This is a pretty simple fix, you just have to add the value property at the end of the second fucntion.
function myFunction2() {
document.getElementById("2ndid").innerHTML = siteName.value;
}
You are not initialising your variable.
here a working code.
<!DOCTYPE html>
<html>
<head>
<title>Storing HTML value into Javascript local storage</title>
</head>
<body>
<h1 id="2ndid">Hello</h1>
<input type="text" id="firstid">
<button onclick="myFunction()">LocalStorage</button>
<button onclick="myFunction2()">Feedback</button>
<script type="text/javascript">
var siteName;
function myFunction() {
siteName= document.getElementById('firstid').value;
localStorage.setItem('store1', siteName);
}
function myFunction2() {
document.getElementById("2ndid").innerHTML = siteName;
}
</script>
</body>
</html>
I am new to javascript programming so am hoping that this is a simple issue... I'm wanting my webpage to allow a user to input a music track name and artist in two separate fields and once you hit 'go' the javascript will run and parse the input into a string. To test I have tried to see if these inputs are being taken and I have tried to print them to console, however nothing is being printed to the console.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spotify</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="main-container">
<div class="header">
<p>TrackSelector</p>
</div>
<section>
<div class="form">
<form action="">
<input type="textt" class="track" placeholder="Enter track..." />
<input type="texta" class="artist" placeholder="Enter artist..." />
<button type="button" class="submit-btn">GO</button>
</form>
</div>
</section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Javascript file:
const app = {};
//Allow the user to enter names
app.events = function() {
$('form').on('button', function(e){
e.preventDefault();
let tracks = $('input[type=textt]').val();
let artists = $('input[type=texta]').val();
console.log(tracks);
console.log(artists);
});
};
//
//
app.init = function(){
app.events();
};
$(app.init);
I believe I have specified to take in the correct inputs and specified the correct button reference, have played around to try out other methods but I'm still quite stuck... any ideas?
Replace
$('form').on('button', function(e){
with
$('form .submit-btn').on('click', function(e){
jQuery .on() expects event name as its first argument.
There is no input type type="textt" and texta. There are only predefined types like text, email, password, checkbox and so on... So make type "text" in both inputs and for reference use id: <input id="my_track" type="text">. Then in javascript get value by $('#my_track').val(); To handle submit use $('form').on('submit', func)
I'm making a prototype for a chat client. At this stage, I'm just learning how to append the user's input to the text area above. However, no matter what I do, it doesn't seem to work. The only time it actually functioned correctly was in jsfiddle, but I can't get it to work when I load my actual HTML page.
It's worth mentioning that, at the advice of a tutorial, I already tried placing the script tag for my JQuery code at the end of the body instead of in the head. The tutorial said that it was essential for all elements be allowed to load before the JQuery code, so that's the way it had to be. As you can see below, the script tags are currently in the head, but that doesn't work either.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="Chat.js"></script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea">
</textarea>
<form ID="in">
<input ID="textField" type="text">
<button ID="send" type="button" name="Send" value="send">Send</button>
</form>
</div>
</body>
</html>
Chat.js
function sendText(){
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
}
Don't wrap document ready handler inside sendText() function, use that instead:
$(document).ready(function () {
$('#send').click(sendText);
});
function sendText(){
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
}
Well, it work if you change your button to submit type and bind the event to form submit:
$('#in').submit(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
return false;
});
http://jsfiddle.net/AztSB/
This seems to work for me:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').html($('#textArea').html() + text);
$('#textField').val('');
});
});
</script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea"></textarea>
<form ID="in">
<input ID="textField" type="text">
<input ID="send" type="button" name="Send" value="send"/>
</form>
</div>
</body>
</html>
Just don't wrap it in your function sendText:
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
You dont need to put it in a function. You can just leave it to Jquery :)
Your stuff in a FIDDLE to see
Jquery:
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').append(text);
$('#textField').val('');
});
UPDATE
Use append() to update the textarea with new text!
It always seems to be a problem and I fail to see why, I'm trying to change element p text by using his ID, element p id="para1" is inside PostEditor.html:
The elementID I want to change is para1 in the following html:
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link href="styles/editor.css" rel="stylesheet" type="text/css" media="screen" />
<script src="scripts/mainScript.js"> </script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="submit" onclick="urlLoader('caller','posthandler.php')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>
The following function is issued by a click on a link inside index.html and displaying the page you are seeing above and is then supposed to change its content:
From index.html I issue the function from link:
<a onclick="postEditing()"> Edit</a>
This line issue the following function:
function postEditing()
{
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.document.getElementById("para1").innerHTML = "11111111111";
result.document.getElementById("para1").innerText = "11111111111";
result.document.getElementById("para1").value = "11111111111";
}
As you can see I tried three methods. I'd never understand what is the difference between them, but I tried all three and none worked!
It's because you're searching the document of the window which shows the index.html, not the document of the newly opened window. try following:
...
var editorWindow = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
editorWindow.document.getElementById("para1").innerHTML = "11111111111";
...
EDIT:
NOW i see the problem: in the function you're trying to access a property of the parameter element, but you don't pass a value for it. So this will end in an error because the accessed object is undefinded!
So you have three options to get it working:
test the parameter (always a good idea): var ID = null; if(element) ID = element.id;
pass a value: <a onclick="postEditing(this)"> Edit</a>
remove the line var ID = element.id;
SOLUTION: (TESTED)
I could not really say why, but the index.html found the para1 and can successfully set the new text. But somehow the new window will reinitialize the old value again.
So you have to do the changing in an handler you run at onLoad:
index.html:
<html>
<head>
<script>
function postEditing() {
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.onload = function() {
result.document.getElementById("para1").innerHTML = "11111111111";
}
}
</script>
</head>
<body>
<a onclick="postEditing()"> Edit</a>
</body>
</html>
PostEditor.html:
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link href="styles/editor.css" rel="stylesheet" type="text/css" media="screen" />
<script src="scripts/mainScript.js"> </script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="submit" onclick="urlLoader('caller','posthandler.php')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>
I'm fairly sure you will need to query the return result of calling window.open like this:
function postEditing(element)
{
var ID = element.id;
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.getElementById("para1").innerHTML = "11111111111";
result.getElementById("para1").innerText = "11111111111";
result.getElementById("para1").value = "11111111111";
}
[Untested though]
Your button type is submit, which is posting the form. The object is changing in the DOM, only after the script runs, the DOM is reloaded back to it's original state. Try changing your button type to "button", and you should see the P element change appropriately.
Edit: Here's the HTML I used to determine the above. Keeping the button as "submit" caused me to see the text change and then swap back. The HTML below should keep the text in place. HTH!
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<script>
function postEditing(element)
{
document.getElementById('para1').innerHTML = "asdafs";
}
</script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="button" onclick="postEditing('caller')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>