JavaScript code is not reading my input in which is a name and should
have output saying Maurice is a very nice name. I think their is a
grammatical error that I am missing in my divOutput.
The program should take name input and output "Maurice is a very nice
name"
//text box
function sayHi() {
var txtName = document.getElementById("txtName");
var divOutput = document.getElementById("divOutput");
var name = txtName.value;
divOutput.innerHTML = "<em>" + name + "</em>";
divOutput.innerHTML = "is a very nice name.";
}
//end HI
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Inner.html</title>
<link rel="stylesheet" type="text/css" href="textBoxes.css" />
</head>
<body>
<h1>Inner HTML </h1>
<form action="">
<fieldset>
<label>Pleae type your name</label>
<input type="text" id="txtName" />
<button type="button" onclick="sayHi()">
Click Me
</button>
</fieldset>
</form>
<div id="divOutput">
Watch this space.
</div>
</body>
</html>
divOutput.innerHTML will replace whatever the divOutput have earlier, instead use +=.
function sayHi() {
var txtName = document.getElementById("txtName");
var divOutput = document.getElementById("divOutput");
var name = txtName.value;
divOutput.innerHTML += "<em>" + name + "</em>";
divOutput.innerHTML += " is a very nice name.";
}
<form action="">
<fieldset>
<label>Pleae type your name</label>
<input type="text" id="txtName" />
<button type="button" onclick="sayHi()">
Click Me
</button>
</fieldset>
</form>
<div id="divOutput">
Watch this space.
</div>
</body>
function sayHi()
{
var txtName = document.getElementById("txtName") ;
var divOutput = document.getElementById("divOutput") ;
var name = txtName.value;
divOutput.innerHTML = "<em>" + name + "</em> ";
divOutput.innerHTML += "is a very nice name.";
}
or
function sayHi()
{
var txtName = document.getElementById("txtName") ;
var divOutput = document.getElementById("divOutput") ;
var name = txtName.value;
divOutput.innerHTML = "<em>" + name + "</em> is a very nice name.";
}
Try this, you are overwriting html. Try this
function sayHi() {
var txtName = document.getElementById("txtName");
var divOutput = document.getElementById("divOutput");
var name = txtName.value;
divOutput.innerHTML = "<em>" + name + "</em> is a very nice name.";
// divOutput.innerHTML = "is a very nice name.";
}
Take a look at this code block where I modified your attempt just a tad.
In brief, you were almost there!
Note that in order to get the value of the element, you can use .value on what was retrieved from getElementById.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Inner.html</title>
<link rel="stylesheet" type="text/css" href="textBoxes.css" />
</head>
<body>
<h1>Inner HTML</h1>
<form>
<fieldset>
<label>Please type your name</label>
<input type="text" id="txtName" />
<button type="button" onclick="sayHi()">
Click Me
</button>
</fieldset>
</form>
<div id="divOutput">
Watch this space.
</div>
<script type="text/javascript">
//text box
function sayHi() {
var txtName = document.getElementById("txtName");
console.log(txtName.value); // <== use dot value to get the value.
var divOutput = document.getElementById("divOutput");
divOutput.innerHTML =
"<em>" + txtName.value + "</em> is a very nice name.";
}
//end HI
</script>
</body>
</html>
Related
I have created an HTML form with three fields. Field A for input text, and fields B and C for number input.
I created a function to calculate B i C, and to output data from A,B and C onto the page.
How can I make it so that field A must be filled in, and fields B and C must be a positive value?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tax calculator</title>
<meta charset="UTF-8">
</head>
<body>
<div>
Field A:<input id="name" type="text">
Field B:<input id="tBas" type="value">
Field C:<input id="tRat" type="value">
<button id="calc">Calculate !</button>
</div>
<strong>
<div id="name"> </div>
<div id="income"> </div>
<div id="rate"> </div>
<div id="result"> </div>
</strong>
<script src="testCalculate.js">
</script>
</body>
</html>
JavaScript:
function calculate() {
var name = document.getElementById('name').value;
var base = parseFloat(document.getElementById('tBas').value);
var rate = document.getElementById('tRat').value;
var taxPayer = ("First and last name: ") + (name);
var taxIncome = ("Income for taxation: ") + ((base).toFixed(2));
var taxRate = ("Tax rate: ") + (rate) + ("%.");
var taxToPay = ("You need to pay: ") + ((base * rate / 100).toFixed(2));
document.getElementById('name').innerHTML = taxPayer;
document.getElementById('income').innerHTML = taxIncome;
document.getElementById('rate').innerHTML = taxRate;
document.getElementById('result').innerHTML = taxToPay;
}
document.getElementById('calc').addEventListener('click', calculate);
To check if a field is filled, you can just compare his value to "".
To check if a field has a positive value, you can use parseInt to cast your value (which is a string) into an integer and then compare it to 0 > 0.
Something like that should do the trick !
function calculate() {
var name = document.getElementById('name').value;
var base = parseFloat(document.getElementById('tBas').value);
var rate = document.getElementById('tRat').value;
if (name != "" && parseInt(base) > 0 && parseInt(rate) > 0) {
var taxPayer = ("First and last name: ")+(name);
var taxIncome = ("Income for taxation: ")+((base).toFixed(2));
var taxRate = ("Tax rate: ")+(rate)+("%.");
var taxToPay = ("You need to pay: ")+((base*rate/100).toFixed(2));
document.getElementById('name').innerHTML = taxPayer;
document.getElementById('income').innerHTML = taxIncome;
document.getElementById('rate').innerHTML = taxRate;
document.getElementById('result').innerHTML = taxToPay;
}
}
document.getElementById('calc').addEventListener('click', calculate);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tax calculator</title>
<meta charset="UTF-8">
</head>
<body>
<div>
Field A:<input id="name" type="text">
Field B:<input id="tBas" type="value">
Field C:<input id="tRat" type="value">
<button id="calc">Calculate !</button>
</div>
<strong>
<div id="name"> </div>
<div id="income"> </div>
<div id="rate"> </div>
<div id="result"> </div>
</strong>
</body>
</html>
You don't need to use JS for this trick
To have the input filled set it as
<input id="name" type="text" required>
Then to have an positive value
<input id="tBas" type="number" min=0 >
IDs should be uniq. You should use another id to you div#name.
For instance, into your html code:
<div id="div_name"> </div>
And then, into your script
document.getElementById('div_name').innerHTML= taxPayer;
The JavaScript function is not responding when called from the HTML body.
I keep getting the error that the function sayHi() is not defined.
<head>
<meta charset="UTF-8">
<title>innerHTML.html</title>
<script type = "text/javasctipt">
// javasctipt
function sayHi(){
txtName = document.getElementById("txtName");
divOutput = document.getElementById("divOutput");
var name = txtName.value;
divOutput.innerHTML = "<em>" + name + "</em>";
divOutput.innerHTML += " is very nice name.";
}
</script>
</head>
<body>
<h1>Inner HTML Demo</h1>
<form action = "">
<fieldset>
<label>Please type your name</label>
<input type = "text"
id = "txtname" />
<button type = "button"
onclick = "sayHi()" >
Click Me
</button>
</fieldset>
</form>
<div id = "divOutput">
Watch this space
</div>
</body>
</html>
Your <script> tag is wrong:
<script type = "text/javasctipt">
You really don't need the "type" or "language" attributes, so just use
<script>
If you feel compelled to use "type", use the correct type:
<script type="text/javascript">
If the "type" attribute isn't something the browser recognizes, the <script> content is completely and silently ignored.
Your element's id is 'txtname' but you want to get it like 'txtName'.
<head>
<meta charset="UTF-8">
<title>innerHTML.html</title>
<script>
function sayHi(){
txtName = document.getElementById("txtname");
divOutput = document.getElementById("divOutput");
var name = txtName.value;
divOutput.innerHTML = "<em>" + name + "</em>";
divOutput.innerHTML += " is very nice name.";
}
</script>
</head>
<body>
<h1>Inner HTML Demo</h1>
<form action = "">
<fieldset>
<label>Please type your name</label>
<input type = "text"
id = "txtname" />
<button type = "button"
onclick='sayHi()'>
Click Me
</button>
</fieldset>
</form>
<div id = "divOutput">
Watch this space
</div>
</body>
There is a typo in type attribute of script tag. Please change it to text/javascript from text/javasctipt. It will work.
I'm new to Javascript and I can't understand why my code is not printing. I take in user input and it is supposed to print out to the textbox; can anyone help?
Forgive my ignorance, I'm a complete newbie with this.
Here's my code:
var $ = function(){
return document.getElementById(arguments[0]);
}
var protoStudent = {
college: "Athlone Institute of Technology",
course: "BSc (Hons) Software Design (Cloud computing)"
}
var createStudent = function(id, name, age){
var student = object.create(protoStudent);
student.id = id;
student.name = name;
student.age = age;
student.showDetails = function(){
return this.id + "\t" + this.name + "\t" + this.age + "\n";
}
return student;
}
var studentArray = [];
var addStudent = function(){
var id = $("studentID"). value;
var name = $("studentName").value;
var age = $("studentAge").value;
student = new createStudent(id, name, age);
studentArray[studentArray.length] = student;
showStudent();
}
var showStudent = function(){
var string = "ID" + "\t" + "Name" + "\t" + "Age" + "\n";
for (var i in studentArray){
string += studentArray[i].showDetails();
}
$("output").value = string;
}
window.onload = function(){
$("add").onclick = addStudent;
}
The html is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Student Register</title>
<link rel="stylesheet" type="text/css" href="StudentRegister.css" />
<script type="text/javascript" src="StudentRegister.js"></script>
<script type="text/javascript" src="shortcuts.js"></script>
</head>
<body>
<div id="content">
<h1>Student Register</h1>
<label for="studentID">Student ID:</label>
<input type="text"
id="studentID"
value="enter student ID here"
onfocus="this.value=''" /><br />
<label for="studentName">Student name:</label>
<input type="text"
id="studentName"
value="enter student name here"
onfocus="this.value=''" /><br />
<label for="studentAge">Student age:</label>
<input type="text"
id="studentAge"
value="enter student age here"
onfocus="this.value=''" /><br />
<br />
<label> </label>
<input type="button"
id="add"
value="Add" /><br />
<textarea id="output" rows="10" cols="60"></textarea>
</div>
</body>
</html>
When I tested your code the browser immediatly gave me this error:
Uncaught ReferenceError: object is not defined. test.php Line 15
Looking at line 15, you have:
var student = object.create(protoStudent);
However, as a case sensitive language you need:
var student = Object.create(protoStudent);
Javascript does not recognize your call to 'object' because only 'Object' is recognized as having the create method.
I tested, and this was working for me.
EDIT: On further reflection, you should check out jQuery so you don't have to declare $ for yourself.
Im not sure why I cannot dynamically write to the paragraph element. I've even tried with just a string to no avail. What am I doing wrong here? Im guessing the default behavior is to POST because that's all that happens, even though I'm not telling it to do it.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
<!--
function submit() {
var fName = "";
var lName = "";
var eLevel = "";
fName = document.person.elements["fName"].value;
lName = document.person.elements["lName"].value;
eLevel = document.person.elements["eLevel"].value;
var result = fName + " " + lName + "<br>" + eLevel;
document.getElementById("result").innerHTML = result;
};
//-->
</script>
</head>
<body>
<form action="" id="person">
Please fill in all fields.<br /><br />
<fieldset><legend>Name:</legend>
First: <input type="text" id="fName" name="fName" /><br /><br />
Last:
<input type="text" id="lName" name="lName" />
</fieldset>
<br />
<fieldset>
<legend>Education:</legend>
Highest Level:
<input list="eLevels" name="eLevel" />
<datalist id="eLevels">
<option value="High School">
<option value="Associate Degree">
<option value="Bachelors Degree">
<option value="Graduate Degree">
</datalist>
</fieldset>
<br /><button value="click" onclick="submit()">click</button>
</form>
<p id="result"></p>
</body>
</html>
You need to preventDefault on the form submit, this way your code can execute.
function submit(event) {
event.preventDefault();
var fName = "";
var lName = "";
var eLevel = "";
fName = document.person.elements["fName"].value;
lName = document.person.elements["lName"].value;
eLevel = document.person.elements["eLevel"].value;
var result = fName + " " + lName + "<br>" + eLevel;
document.getElementById("result").innerHTML = result;
};
For the event parameter you will need to pass it in the onClick() event
<button value="click" onclick="submit(event)">click</button>
hi guys i am new to js and html.I need a o/p as when click the button tat should show the all contents entered in form...
My code for giving alert of all entered data in single
how can I add values of form textbox using string ,for loop all should be only in javascript...or else give your own code with the conditions i said....
<html>
<head>
<title>elements in a form</title>
<script type="text/javascript">
function processFormData()
{
var len= document.getElementsByTagName('name');
var str1=null;
for(i=0;i<=len;i++)
{
var str=(subscribe.name[i].value);
str=str1+str;
}
alert(str);
}
</script>
</head>
<body>
<form name ="subscribe" >
<p><label for="name">Your Name: </label><input type="text" name="name" id="txt_name" value="name"></p>
<p><label for="email">Your Email: </label><input type="text" name="email" id="txt_email" value="mail"></p>
<input type="button" value="submit" onclick="processFormData()">
</form>
</body>
</html>
Try that for a start
var len= document.getElementsByTagName('input').length;
// add that you want the number of element
// Change 'name' for 'input' when using 'name' you are looking for <name in the HTML
// if you want the element with the name ABC use getElementsByName()
var str1='';
for(i=0;i<=len;i++)
{
var str=(subscribe[i].value);
str1=str1+str;
}
alert(str1);
jsFiddle example (in jQuery for the calling of the function) : http://jsfiddle.net/DavidLaberge/HPuhg/1/
<html>
<head>
<title>elements in a form</title>
<script type="text/javascript">
var str1=null;
function processFormData()
{
var len= document.getElementsByTagName('name').length;
for(i=0;i<=len;i++)
{
var str=(subscribe.name[i].value);
str1=str1+str;
}
alert(str1);
}
</script>
</head>
<body>
<form name ="subscribe" >
<p><label for="name">Your Name: </label><input type="text" name="name" id="txt_name" value="name"></p>
<p><label for="email">Your Email: </label><input type="text" name="email" id="txt_email" value="mail"></p>
<input type="button" value="submit" onclick="processFormData()">
</form>
</body>
</html>
you have just minor mistake that is you used str in place of str1; Now use the above code.
Try something like:
function processFormData() {
var inputs = document.getElementsByTagName("input"),
i,
len,
stringBuffer = [],
str;
for (i = 0, len = inputs.length; i < len; i++) {
if (inputs[i].type.toLowerCase() === "text") {
stringBuffer.push(inputs[i].value);
}
}
str = stringBuffer.join(""); // str contains concatenated values of all inputs
}
Try this:
function processFormData()
{
var len= document.getElementsByTagName('input').length;
var str = '';
for(i=0;i<len-1;i++)
{
str += document.subscribe[i].value;
}
alert(str);
}