Console log data return as null - javascript

Sorry for the little explanation. So i have already done my chrome extension and i already have a save data in my localstorage which is FirstName. so now the getElementById is the one suppose to web scape my current page that i am on to fill up the form when i click START which is button1 Hopefully these clear things
i have also provided my index.html where if i click start it should execute injector.js
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<style>
html,
body {
height: 200px;
width: 400px;
}
</style>
</head>
<body>
<h1>Adidas ACO</h1>
<h2>Select your choice</h2>
<button>Go for Setup</button>
<button id="buttonstart"><script src="injector.js"></script>
</script>START</button>
<!-- <br>
<br>
<label for="Title">Title</label>
<input type="text" id="firstnametitle" name="title" size="50" value=""/> -->
<!--<script scr="injector.js"></script>-->
<!--<button onclick="fillforms(fillup)">Start</button>-->
</body>
</html>
injector.js
// Get my button and localstorage data
var button1 = document.getElementById("buttonstart");
var firstName = localStorage.getItem('First Name');
var lastName = localStorage.getItem('Last Name');
var address1 = localStorage.getItem('Address 1');
var address2 = localStorage.getItem('Address 2');
var email = localStorage.getItem('Email');
var phoneNumber = localStorage.getItem('Phone Number');
/// When button is click, it will webscape and fill up
button1.onclick = function(){
var firstName = localStorage.getItem('First Name');
var field1 = document.getElementsByClassName("shippingAddress-firstName");
fillField(field1, firstName);
console.log(field1)
console.log(firstName)
}
function fillField(field1, value){
if(field1){
field1.value = value;
}
}
Picture to my console values

Declare the variables firstname and field1 at the start of the file.You have to do it because in your code you can only use those variables inside the button1.onclick function since you have declared them there.

Related

How can I convert the value written in HTML input to the string variable?

var imie = document.getElementById("imim");
function wypisz_imie() {
document.getElementById("powitanie").innerHTML = "Czesc!" + imie;
}
<!DOCTYPE>
<html>
<head>
<title>My city v1.0</title>
</head>
<body>
<script type="text/javascript" src="skrypt.js"></script>
<h2>Wpisz jak masz na imie</h2>
<input type="text" id="imim" value="" />
<input type="submit" id="potwim" value="potwierdz" onclick="wypisz_imie()" />
<h1 id="powitanie"></h1>
</body>
</html>
Sorry for my English cause i'm from Poland and i'm new user. I'll be thankfull for answers!
You can use document.getElementById("imim").value to get the text in the text field. It's up to you what to do from there!
imie will return the input element so you should use value property like this:
var imie = document.getElementById("imim");
function wypisz_imie()
{
document.getElementById("powitanie").innerHTML = "Czesc!" + imie.value;
}
imie.value will return the value of input.
check w3s.
but every time the value will return "", to solve this problem you should access input every time call function to return input with new value like this:
function wypisz_imie()
{
var imie = document.getElementById("imim");
document.getElementById("powitanie").innerHTML = "Czesc!" + imie.value;
}

get value from HTML form with Javascript and then display them on html

This is my first post ever! So I am currently studying front end web development online. I have come across a problem! I am trying to get input from a user HTML form and display those values back on the HTML document. When I do it using javascript work but when using the form it dont.
see my code in codepen : http://codepen.io/kevin1616/pen/KdOvwy
My html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Contact List</title>
</head>
<body>
<header>
<h1> ContactBook.com </h1>
</header>
<section id="body">
<form method="post">
<input type="text" id="name" ><br>
<input type="text" id="last" ><br>
<input type="text" id="phone" ><br>
<input type="text" id="address" ><br>
<input type="submit" id="create_new_contact" >
</form>
<ol id="people">
</ol>
</section>
<script src="js.js"></script>
</body>
</html>
my javascript
// JavaScript Document
// CONTACTS CONTRUCTOR OBJECT
var contacts = function ( ) {
this.name = [];
this.lastName= [];
this.phoneNumber = [];
this.address= [];
};
contacts.prototype.add = function(name, last, number, address) {// Add method to add contacts
this.name.push(name);
this.lastName.push(last);
this.phoneNumber.push(number);
this.address.push(address);
}
contacts.prototype.toHTML = function (i) {// toHTML method formats how html will be displayed
var htmlString ="<li>";
htmlString +="<p>" + this.name[i] + "<p>";
htmlString +="<p>" + this.lastName[i] + "<p>";
htmlString +="<p>" + this.phoneNumber[i] + "<p>";
htmlString +="<p>" + this.address[i]+ "<p>";
htmlString +="</li>";
return htmlString;
};
contacts.prototype.renderElement = function (list) {// method for sending input to html
for ( var i=0; i < this.name.length; i++) {
list.innerHTML+= this.toHTML(i);
}
};
var addingContact = new contacts();// creating new instance of contructor
addingContact.add("Kevin", "Silvestre" ,"781 582 4449", "26 endicott st");// using the add method to add contacts to my list
var itemsTorender = document.getElementById("people");// select where in the html the elemtents will be rendered
addingContact.renderElement(itemsTorender);// render elements to html
You Just Need A function which call during submit form to get form data that time and show it in list
function saveData(){
var name = document.getElementById("name").value;
var last = document.getElementById("last").value;
var phone = document.getElementById("phone").value;
var address = document.getElementById("address").value;
addingContact.add(name,last ,phone, address);// using
var itemsTorender = document.getElementById("people");// select where in the html
addingContact.renderElement(itemsTorender);// render elements to html
return false; // this will stop default submit of form (because by default form submit on "action" url if no action is define than on same page )
}
and you need to call it like
<form method="post" action="#" onsubmit="return saveData()">
Fiddle

Javascript " onsubmit " Event Not Working Correctly

I am just practicing js. I am trying to make a very simple validation in form but it came with, as i was expecting, an error.
Here's my code :
var form = document.getElementById('form');
var name = document.getElementById('name');
var email = document.getElementById('email');
var msg = document.getElementById('message');
var error = document.getElementById('error');
function handlingForm() {
form.onsubmit = function(c)
{
if (name.value == "")
{
error.innerHTML = "Error Submiting Form !";
return false;
}
else
{
error.innerHTML = "You have successfuly submited the Form..! Congrats ;)";
return true; // ;) Just Kidding :D
}
};
}
window.onload = function(c)
{
handlingForm();
}
<!DOCTYPE html>
<html>
<head>
<title>jsForm</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<form id="form">
<input type="text" placeholder="Name" id="name">
<input type="text" placeholder="Email" id="email">
<textarea rows="4" placeholder="Message" id="message"></textarea>
<input type="submit" value="Send" id="send">
<p id="error"></p>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
The problem is that, it doesn't validate it. Every time it returns true on submitting but when i replace the " name.value" with "email.value" the code works. I don't know now what's the problem actually. If someone could help me..
It looks like the input with id name is not created in DOM by the time of JavaScript execution.
You can resolve that by putting the code in the window.onload code block or inside the form.onsubmit
var form = document.getElementById('form');
var email = document.getElementById('email');
var msg = document.getElementById('message');
var error = document.getElementById('error');
function handlingForm() {
form.onsubmit = function(c) {
var name = document.getElementById('name');
if (name.value == "") {
error.innerHTML = "Error Submiting Form !";
return false;
} else {
error.innerHTML = "You have successfuly submited the Form..! Congrats ;)";
return true; // ;) Just Kidding :D
}
};
};
handlingForm();
<div id="container">
<form id="form">
<input type="text" placeholder="Name" id="name">
<input type="text" placeholder="Email" id="email">
<textarea rows="4" placeholder="Message" id="message"></textarea>
<input type="submit" value="Send" id="send">
<p id="error"></p>
</form>
</div>
Your variable called name is a problem. It's not working because name is a predefined identifier in some implementations. Though it's not a reserved keyword, it's best practice to avoid using it as a variable name.
Rename it to name_ (or almost anything else) and it will work.
If name.value has no value, it is undefined. So undefined !== "", which is why it will never be true. Just do a null check for name.value. Also, you need to move name inside of that function since the first time it is called, value will always be undefined:
var form = document.getElementById('form');
var email = document.getElementById('email');
var msg = document.getElementById('message');
var error = document.getElementById('error');
function handlingForm() {
form.onsubmit = function(c)
{
var name = document.getElementById('name');
if (!name.value)
{
error.innerHTML = "Error Submiting Form !";
return false;
}
else
{
error.innerHTML = "You have successfuly submited the Form..! Congrats ;)";
return true; // ;) Just Kidding :D
}
};
}
window.onload = function(c)
{
handlingForm();
}
<!DOCTYPE html>
<html>
<head>
<title>jsForm</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<form id="form">
<input type="text" placeholder="Name" id="name">
<input type="text" placeholder="Email" id="email">
<textarea rows="4" placeholder="Message" id="message"></textarea>
<input type="submit" value="Send" id="send">
<p id="error"></p>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
Try this:
window.onload = handlingForm();
Why your function has c parameter?
This is due to a quirk of how global variables are handled in web pages. Each one is treated as a property of the window object, so when you assign to email, you're actually creating and assigning to window.email, and so on.
However, some properties of the window object already exist and have special meaning to the browser, such as window.location (the current URL) and window.name (used in cross-frame link targets).
To see it in practice, do this in the global scope (outside any function):
var location; // should be undefined, right?
alert(location); // but it's actually window.location
Because of the special meaning of window.name, anything you assign to it (or to global name) will be converted into a string. The element that you try to store becomes a string, and so no longer works as an element.
To fix it, simply move your code into a function, so that the variables are local and no longer have this strange behaviour. You can use your window.onload function for this.

How do I set up my webpage to take input from a text field and use it as new text on the page?

I am trying to make a web app that works as flash cards but I need to be able to take what the user types into a textbook and add it to the page. Here is what I have found but I want the text to be embedded.
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>textBoxes.html</title>
<script type = "text/javascript">
// from textBoxes.html
function sayHi(){
var txtName = document.getElementById("txtName");
var txtOutput = document.getElementById("txtOutput");
var name = txtName.value;
txtOutput.value = "Hi there, " + name + "!"
} // end sayHi
</script>
<link rel = "stylesheet"
type = "text/css"
href = "textBoxes.css" />
</head>
<body>
<h1>Text Box Input and Output</h1>
<form action = "">
<fieldset>
<label>Type your name: </label>
<input type = "text"
id = "txtName" />
<input type = "button"
value = "click me"
onclick = "sayHi()"/>
<input type = "text"
id = "txtOutput" />
</fieldset>
</form>
</body>
</html>
Check out AngularJS. It can do what you want. And so much more!
var app = angular.module('app', []);
app.controller('AppCtrl', function($scope) {
$scope.name = "";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="AppCtrl">
<input type "text" placeholder="Enter your name" ng-model="name" />
<h3>Hello<span ng-show="name">, </span>{{name}}!</h3>
</div>
Edit: You can also use JQuery: Here's a fiddle
If you don't want to use Angular, this works:
function writeToElement(id, value){
var target= document.getElementById("id");
if (target) {
target.innerHTML = value;
return target;
} else {
return false;
}
}
Then you can set an onClick to writeToElement(someId, this.value) where someId is the id of the element you want to change.

Log box with text input

I am trying to create a log box with a text input and a submit button. I can get it to display entered text with
var test = function() {
var test1 = document.getElementById('input');
var totalTest = test1.value;
document.getElementById('log').innerHTML += totalTest;
};
But I cant get it to respond to it. I want to keep asking questions and all answers come from one input box. I am very new still to JavaScript, and would love anyone's help.
Here is all I have so far. JAVASCRIPT:
var playerInput = function () {
var pInput = document.getElementById('input');
var input = pInput.value;
};
var playerNum = function () { //Choice between Single and Multiplayer
document.getElementById('log').innerHTML = "Would you like to play singleplayer or multiplayer?";
oneOrTwo(input);
};
var oneOrTwo = function (input) {
var playerAmount = input;
if (playerAmount == "singleplayer") {
//singlePlay();
} else {
document.getElementById('log').innerHTML = "Multiplayer is coming soon";
//multiPlay();
}
};
HTML:
<!DOCTYPE html>
<html>
<head>
<title> Rock Paper Scissors, with Single and Multiplayer! </title>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="logHeader">
<h1 style="font-size: 20px; font-family: calibri;"> Rock, Paper, Scissors </h1>
</div>
<div id="log"></div>
<br >
<input id="input" type="text" onFocus="if(this.value=='Type here') this.value='';" style="border: 2px solid; width: 300px; background-color: lightblue;" value="Type here">
<input type="button" value="Enter" onClick="test()">
<br >
<br >
<input type="button" onclick="playerNum()" value="Start Game">
</body>
</html>
Really all you need to change is to move the oneOrTwo(input) call up to your playerInput() function.
It doesn't make sense to try to read the input right away after asking the question; the user won't have time to respond.
var playerNum = function () { //Choice between Single and Multiplayer
document.getElementById('log').innerHTML = "Would you like to play singleplayer or multiplayer?";
//nothing else, read the input later
};
When the player enters a response and clicks the 'Enter' button, then try to read the input:
var playerInput = function () {
var pInput = document.getElementById('input');
var input = pInput.value;
oneOrTwo(input);
};
And the corresponding HTML:
<input type="button" value="Enter" onClick="playerInput()">
Threw it into a JSFiddle here: http://jsfiddle.net/KfUp8/
var input = pInput.value; stores the value of your input into that variable.
It will never change unless you execute that same line again.
Replace oneOrTwo(input); with oneOrTwo(pInput.value); to get a fresh value every time.

Categories