So i'm quite new to javascript and im wondering why the output wont show "Hello John, Your last name is Johnsen" when the button is clicked. I have tried several times with different code and it doesnt seem to work. I also get an error in the console where it says "Uncaught TypeError: name is not a function
at HTMLButtonElement.onclick"
Code and output picture: (i couldnt make it in a code box sorry)
Output
Code:
function Name() {
var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;
document.getElementById("demo").innerHTML = "Hello " + firstname + <br> + "Your lat name is: " + lastname;
}
<div>
First Name: <input type="text" id="fname" value=""><br><br>
Last Name: <input type="text" id="lname" value="">
<button onclick="Name()">Submit</button>
<p id="demo"></p>
</div>
Console error
<br> needs to be enclosed in ".
Check this.
function clicked() {
var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;
document.getElementById("demo").innerHTML = "Hello " + firstname + "<br>" + "Your lat name is: " + lastname;
}
<div>
First Name: <input type="text" id="fname" value=""><br><br>
Last Name: <input type="text" id="lname" value="">
<button onclick="clicked()">Submit</button>
<p id="demo"></p>
</div>
var fname = document.getElementById('fname');
var lname = document.getElementById('lname');
var res = document.getElementById('demo')
function fullName(){
res.innerHTML = `Firstname : ${fname.value} <br/> lastname : ${lname.value}`;
}
<div>
First Name: <input type="text" id="fname" value=""><br><br>
Last Name: <input type="text" id="lname" value="">
<button onclick="fullName()">Submit</button>
<p id="demo"></p>
</div>
Related
I made a form to get name and last name from user. When they submit the form it will save the information into an object
document.getElementById('sub').addEventListener('click', () => {
let name = document.getElementById('name').value;
let lastName = document.getElementById('lastName').value;
let user = {
name: name,
lastName: lastName
}
let sayHello = document.getElementById('sayHello');
sayHello.innerHTML = "hello " + user.name + " " + user.lastName + " how are you?"
})
<div>
<form>
<label> name : </label>
<input type="text" id="name"> <br>
<label> last name : </label>
<input type="text" id="lastName"> <br>
<button id="sub">save</button>
</form>
</div>
<span id="sayHello">hi</span>
How can I fix it?
Your button is trying to submit a form, which causes the page to refresh.
You can prevent this by calling preventDefault() on the click event:
document.getElementById('sub').addEventListener('click', (e) => {
e.preventDefault();
let name = document.getElementById('name').value;
let lastName = document.getElementById('lastName').value;
let user = {
name: name,
lastName: lastName
}
let sayHello = document.getElementById('sayHello');
sayHello.innerHTML = "hello " + user.name + " " + user.lastName + " how are you?"
})
<div>
<form>
<label> name : </label>
<input type="text" id="name"> <br>
<label> last name : </label>
<input type="text" id="lastName"> <br>
<button id="sub">save</button>
</form>
</div>
<span id="sayHello">hi</span>
I am trying to take form information, enter them into an info array and then print out that array to a paragraph within a string concatenation.
Here's my HTML:
<body>
<input type="text" id="name" placeholder="Enter first name">
<input type="text" id="lName" placeholder="Enter last name">
<input type="text" id="age" placeholder="Enter age">
<input type="text" id="email" placeholder="Enter email address">
<button>Add Info</button>
<article>
<div>
<p>8</p>
</div>
</article>
<p id="future"></p>
<main>
</body>
Here's my Javascript:
const btn = document.querySelector('button');
const paras = document.querySelectorAll('p');
btn.addEventListener("click", function(){
const name = document.getElementById("#name");
const lName = document.querySelector("#lname");
const age = document.querySelector("#age");
const email = document.querySelector("#email");
let info = [name + " " + lName + " , you are " + age + "!" + " But by your next birthday, you will
inherit $10 million dollars! We will email you your fortune to: " + email + "."];
document.querySelector("#future").innerHTML = info;})
I get:
null [object HTMLInputElement] , you are [object HTMLInputElement]! But by your next birthday, you will inherit $10 million dollars! We will email you your fortune to: null.
There are several problems:
getElementById expects only the id as argument, without #. (querySelector need this, because it takes a css-selector as argument).
There's a typo in this selector: const lName = document.querySelector("#lname"): #lName instead of #lname.
You printed the input-elements, not their values. Use .value for that.
const btn = document.querySelector('button');
const paras = document.querySelectorAll('p');
btn.addEventListener("click", function() {
const name = document.getElementById("name");
const lName = document.querySelector("#lName");
const age = document.querySelector("#age");
const email = document.querySelector("#email");
let info = [name.value + " " + lName.value + " , you are " + age.value + "!" + " But by your next birthday, you will inherit $10 million dollars!We will email you your fortune to: " + email.value + "."];
document.querySelector("#future").innerHTML = info;
})
<body>
<input type="text" id="name" placeholder="Enter first name">
<input type="text" id="lName" placeholder="Enter last name">
<input type="text" id="age" placeholder="Enter age">
<input type="text" id="email" placeholder="Enter email address">
<button>Add Info</button>
<article>
<div>
<p>8</p>
</div>
</article>
<p id="future"></p>
</body>
I have a form on a webpage that I want a user to be able to fill out, hit submit, and it displays something like "User: [name] has a [event] event at [location] with details [description]" in a comment section below. So multiple entries will just load under each other. Right now when I hit submit, it will only submit the description text and nothing else. My function getInfo() should be displaying multiple values but is not. How can I remedy this. Full code linked below
https://github.com/tayrembos/Nav/blob/master/back.html
<script type="text/javascript">
function getInfo() {
text = name.value;
text = words.value;
document.getElementById("para").innerHTML += '<p>'+ text
document.getElementById("words").value = "Enter comment"
document.getElementById('name').value = "Enter name"
}
</script>
<form method="POST" name='myform'>
<p>Enter your name:
<textarea id='name' rows="1" cols="20">Enter name</textarea>
<textarea id='name' rows="1" cols="20">Enter name</textarea>
<textarea id='words' rows="10" cols="20">Enter comment</textarea>
<input type="button" onclick="getInfo()" value="Submit!" /> <br>
<p id="para"></p>
i use append from jquery(vote if it really solves your problem).
function myFunction() {
var x = document.getElementById("product");
var txt = "";
var all = {};
var i;
for (i = 0; i<x.length-1; i++) {
//txt = txt + x.elements[i].value + "<br>";
all[x.elements[i].name]= x.elements[i].value;
}
$("p").append(JSON.stringify(all, null, 2));
//var myObj = { "name":"John", "age":31, "city":"New York" };
//document.getElementById("demothree").innerHTML = myObj;
//var myJSON = JSON.stringify(all);
//window.location = "server.php?x=" + myJSON;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<form id="product">
Expire: <input type="text" name="pexpire" value="3:45"><br>
Old Price: <input type="text" name="poldprice" value="30"><br>
Price: <input type="text" name="pprice" value="28"><br>
Category: <input type="text" name="pcategory" value="Ενδύματα"><br>
Variaty: <input type="text" name="pvariaty" value="Τζιν"><br>
City: <input type="text" name="pcity" value="Δράμα"><br>
Store: <input type="text" name="pstore" value="Groove"><br>
Picture: <input type="text" name="ppicture" value="aaa"><br>
</form>
<button onclick="myFunction()">Submit</button>
<p id="list"></p>
A user is filling in a form:
fname : Firstname
mname : middlename
lname : lastname
fullname : Complete naam
Before the user is entering field4 I would like to give already the values fname & mname & lname as a start in fullname. I found out that this should be done as below.
I already made this but something is wrong... I have almost no Javascript experience...
<!DOCTYPE html>
<html>
<body>
First name: <input type="text" id="fname"><br>
Middle name: <input type="text" id="mname"><br>
Last name: <input type="text" id="lname"><br>
Fullname: <input type="text" id="fullname" onfocus="myFunction()"><br>
<script>
function myFunction() {
document.getElementById("fullname").style.background = "yellow";
document.getElementById("fullname").value = document.getElementsByTagName("fname").value + document.getElementsByTagName("mname").value + document.getElementsByTagName("lname").value;
}
</script>
</body>
</html>
You are using the getElementsByTagName method, but the value you are passing to it is the id of an element, not the tag name (which would be "input").
Use getElementById to get an element by its id.
Either you could access using getElementById like this:
First name:
<input type="text" id="fname">
<br>Middle name:
<input type="text" id="mname">
<br>Last name:
<input type="text" id="lname">
<br>Fullname:
<input type="text" id="fullname" onfocus="myFunction()">
<br>
<script>
function myFunction() {
document.getElementById("fullname").style.background = "yellow";
document.getElementById("fullname").value = document.getElementById("fname").value + document.getElementById("mname").value + document.getElementById("lname").value;
}
</script>
OR
Stick to use getElementsByTagName.
First name:
<input type="text" id="fname">
<br>Middle name:
<input type="text" id="mname">
<br>Last name:
<input type="text" id="lname">
<br>Fullname:
<input type="text" id="fullname" onfocus="myFunction()">
<br>
<script>
function myFunction() {
var inputArr = document.getElementsByTagName("input");
document.getElementById("fullname").style.background = "yellow";
inputArr[3].value = inputArr[0].value + inputArr[1].value + inputArr[2].value;
}
</script>
Sounds good!
I have this function here:
function nameSplit() {
var option_result = document.getElementById("fname").value;
var option_array=option_result.split(" ");
document.getElementById('first_name').value = option_array[0];
document.getElementById('last_name').value = option_array[1];
}
function myFunction() {
var option_result = document.getElementById("fname").value;
document.getElementById("demo").innerHTML = option_result.length;
document.getElementById("demo2").innerHTML = option_array.prototype.length;
}
<form>
<label>Name:</label>
<input type="text" id="fname">
<input type='button' onclick='nameSplit()' value='Change Text'/>
</form>
<br>
<input id="first_name" name="fid" value="" />
<input id="last_name" name="sid" value="" />
<br>
option_result: <p id="demo"></p>
option_array: <p id="demo2"></p>
<button onclick="myFunction()">Try it</button>
As you can see my option_array.prototype.length; is not returning anything. So I don't know the best way the explain this but in short I want to determine how many arrays are within the function and have that as the number that is being pulled at
document.getElementById('last_name').value = option_array[1];
I want it to work like this:
document.getElementById('last_name').value = option_array[(Number of total arrays)];
If you run the original function and type "John Doe" it will split it into "John" and "Doe", but if you change the input to "John Doe Jr." it will still return with "John" and "Doe". I want it to return "John" and "Doe Jr."
I have tried to create a script that runs option_array[1] + " " + option_array[2]; but if a person only uses two parts of the array, the third comes back undefined.
Any ideas?
Well I thought this function would be a great way to retrieve the information I needed but my boss stop by my desk and told me there was an easier way, and gave me some information to do research on, and so I went on to build a new one..
Here is the code for anyone interested:
function nameSplit() {
var first_name = document.getElementById("first_name");
var last_name = document.getElementById("last_name");
var fname = document.getElementById("fname");
var myfname = fname.value.trim();
if (myfname.indexOf(" ") < 0)
{
first_name.value = fname.value.trim();
last_name.value = "Undefined";
} else {
first_name.value = fname.value.substring(0, fname.value.indexOf(" "));
last_name.value = fname.value.substring((fname.value.indexOf(" ") + 1), fname.value.length);
}
}
<form>
<label>Name:</label>
<input type="text" id="fname">
<input type='button' onclick='nameSplit()' value='Submit'/>
</form>
<br>
<input id="first_name" value="" />
<input id="last_name" value="" />
Thanks for your help #jongware