Function Not Called on click? - javascript

Simple Madblib project. Or so I thought. This is probably an easy fix but I'd greatly appreciate any help, I can't seem to get it to work correctly.
The function isn't called when button is clicked. Any suggestions? I've tried changing location of function and form, as well as adjusting "" on the input string.
<!DOCTYPE html>
<html>
<script>
< head >
script language = "JavaScript" >
function Mission() {
var a1 = document.AgentID.elements[0].value;
var a2 = document.City.elements[0].value;
var a3 = document.Country.elements[0].value;
var a4 = document.Utensil.elements[0].value;
var a5 = document.Adj1.elements[0].value;
var a6 = document.Animal.elements[0].value;
var a7 = document.Transportation.elements[0].value;
document.write("<br>" + "<br>")
document.write("Congradulations on accepting your next assignment Agent " + a1 + "")
document.write("<br>" + "<br>")
document.write("Your flight leaves to " + a2 + " , " + a3 + " in the next eight hours. You have been granted your weapon of choice, the " + a5 + " " + a4 + ". Your assignment is to capture the " + a6 + " with minimal casualties. Your extraction via " + a7 + " will be waiting.")
document.write("<br>" + "<br>")
document.write("Best of Luck Agent " + a1 + "")
document.write("<br>")
document.write("Operations HQ")
}
</script>
</head>
<body>
<form id="AgentID" name="AgentID">
AgentID <input type="text">
</form>
<form id="City" name="City">
City <input type="text">
</form>
<form id="Country" name="Country">
Country <input type="text">
</form>
<form id="Utensil" name="Utensil">
Noun <input type="text">
</form>
<form id="Adj1" name="Adj1">
Adjective <input type="text">
</form>
<form id="Animal" name="Animal">
Animal <input type="text">
</form>
<form id="Transportaion" name="Transportaion">
Transportation <input type="text">
</form>
<form>
<input type="button" value="Accept" onClick="Mission()">
</form>
</body>
</html>

Lots of issues in your code.
HTML is not valid. The tags are not missing structure. Script needs to be either in head or body.
You are NOT using the same name for Transportation in the javascript as you do in the HTML.
Following should work.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function Mission() {
var a1 = document.AgentID.elements[0].value;
var a2 = document.City.elements[0].value;
var a3 = document.Country.elements[0].value;
var a4 = document.Utensil.elements[0].value;
var a5 = document.Adj1.elements[0].value;
var a6 = document.Animal.elements[0].value;
var a7 = document.Transportation.elements[0].value;
document.write("<br>" + "<br>")
document.write("Congradulations on accepting your next assignment Agent " + a1 + "")
document.write("<br>" + "<br>")
document.write("Your flight leaves to " + a2 + " , " + a3 + " in the next eight hours. You have been granted your weapon of choice, the " + a5 + " " + a4 + ". Your assignment is to capture the " + a6 + " with minimal casualties. Your extraction via " + a7 + " will be waiting.")
document.write("<br>" + "<br>")
document.write("Best of Luck Agent " + a1 + "")
document.write("<br>")
document.write("Operations HQ")
}
</script>
</head>
<body>
<form id="AgentID" name="AgentID">
AgentID <input type="text">
</form>
<form id="City" name="City">
City <input type="text">
</form>
<form id="Country" name="Country">
Country <input type="text">
</form>
<form id="Utensil" name="Utensil">
Noun <input type="text">
</form>
<form id="Adj1" name="Adj1">
Adjective <input type="text">
</form>
<form id="Animal" name="Animal">
Animal <input type="text">
</form>
<form id="Transportation" name="Transportation">
Transportation <input type="text">
</form>
<form>
<input type="button" value="Accept" onClick="Mission()">
</form>
</body>
</html>

Related

how to fix my Metric/Imperial unit conversion project in Javascript

i am trying to build a solo project in javascript. I am having trouble to display a function when an number input is submitted.
this is my HTML code
<header>
<h1>Metric/Imperial unit conversion</h1>
<form>
<input type="number" name="input" id="input1">
<input type="submit" onclick="meterFeet()">
</form>
</header>
<main>
<h3>Length (Meter/Feet)</h3>
<p class="p-l" id="p-l1" "></p>
</main>
and this is my javascript code
let miucn = document.getElementById("input1");
function meterFeet() {
document.getElementById("p-l1").textContent =
miucn +
" meters = " +
(miucn * 3.281).toFixed(3) +
" feet | " +
miucn +
" feet =" +
(miucn / 3.281).toFixed(3) +
" meters";
}
I made some small fixes in your code.
change input type from submit to button
put (document.getElementById("input1").value) inside the function
parseInt() the input value
function meterFeet() {
let miucn = parseInt(document.getElementById("input1").value);
document.getElementById("p-l1").textContent =
miucn +
" meters = " +
(miucn * 3.281).toFixed(3) +
" feet | " +
miucn +
" feet =" +
(miucn / 3.281).toFixed(3) +
" meters";
return false;
}
<header>
<h1>Metric/Imperial unit conversion</h1>
<form>
<input type="number" name="input" id="input1">
<input type="button" onclick="meterFeet()" value="Submit">
</form>
</header>
<main>
<h3>Length (Meter/Feet)</h3>
<p class="p-l" id="p-l1" "></p>
</main>

Why JavaScript Not Execute?

my javascript won't work I tried everything
here is the example
function prep2() {
if (f1.c1.value, f1.a1.value, f1.t1.value != "") {
var character = f1.c1.value;
var age = f1.a1.value;
var thing = f1.t1.value;
document.getElementByid("lolo").innerHTML = "hi my name is " + character + ", i am " + age + " years old. and i love " + thing;
}
}
<head>
<title>test</title>
</head>
<body>
<h1>Story Maker</h1>
<form name="f1">
Character <input type="text" name="c1"><br><br> Age&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<input type="number" name="a1"><br><br> Favourite <input type="text" name="t1"><br><br>
<input type="button" onclick="prep2()" value="sumbit">
<h1>Story:</h1><br>
<p id="lolo"></p>
</form>
</body>
_________________________________________________________________________________________________________________________________________________________________________________________________________________________--
Looks like your code had document.getElementByid instead of document.getElementById.
The below code seems to be working:
function prep2() {
if (f1.c1.value, f1.a1.value, f1.t1.value != "") {
var character = f1.c1.value;
var age = f1.a1.value;
var thing = f1.t1.value;
document.getElementById("lolo").innerHTML = "hi my name is " + character + ", i am " + age + " years old. and i love " + thing;
}
}
<head>
<title>test</title>
</head>
<body>
<h1>Story Maker</h1>
<form name="f1">
Character <input type="text" name="c1"><br><br> Age&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<input type="number" name="a1"><br><br> Favourite <input type="text" name="t1"><br><br>
<input type="button" onclick="prep2()" value="Submit">
<h1>Story:</h1><br>
<p id="lolo"></p>
</form>
</body>

Why is this code not working when it worked before & Add a button for random values

The code was working perfectly before. I tried a lot of things to fix it and it doesn't seem to want to work. Is it because there are too many variables? In addition, I'd love to add a button and have values (an array) show up when a "Random" button is placed. Thanks!
<html><head>
<title>
Mad Libs Story
</title>
<script>
function getVars() {
var firstPerson = String(document.getElementbyId("personOne").value);
var firstAdjective = String(document.getElementById("adjectiveOne").value);
var secondAdjective = String(document.getElementById("adjectiveTwo").value);
var thirdAdjective = String(document.getElementById("adjectiveThree").value);
var secondPerson = String(document.getElementById("personTwo").value);
var fourthAdjective = String(document.getElementById("adjectiveFour").value);
var firstNumber = Number(document.getElementById("numberOne").value);
var thirdPerson = String(document.getElementById("personThree").value);
document.getElementById("madLibCreation").innerHTML = "Dear " + firstPerson + ",Overall, the camp is " + firstAdjective + "The camp counselors are " + secondAdjective + "and the food is " + thirdAdjective + ".Today, I met someone named " + secondPerson + "and we become " + fourthAdjective + "friends. I hope to write to you in " + firstNumber + "days.Sincerely," + thirdPerson + ".";
}
</script>
</head>
<body>
<h3>
Welcome to Mad Libs! Please type in the prompted Information. Then press the submit button. Have fun!
</h3>
<p>
Name of Person in Room: <input type="text" id="personOne">
</p>
<p>
Adjective: <input type="text" id="adjectiveOne">
</p>
<p>
Adjective: <input type="text" id="adjectiveTwo">
</p>
<p>
Adjective: <input type="text" id="adjectiveThree">
</p>
<p>
Name of Someone: <input type="text" id="personTwo">
</p>
<p>
Adjective: <input type="text" id="adjectiveFour">
</p>
<p>
Number: <input type="text" id="numberOne">
</p>
<p>
Name of Someone: <input type="text" id="personThree">
</p>
<p>
<input type="submit" value="Get My MadLib Creation!" onclick="getVars();">
</p>
<p id="madLibCreation"></p>
</body></html>
A small typo in var firstPerson = String(document.getElementbyId("personOne").value);. getElementbyId needs a capital B: getElementById. Here is the code with the type corrected.
<html><head>
<title>
Mad Libs Story
</title>
<script>
function getVars() {
var firstPerson = String(document.getElementById("personOne").value);
var firstAdjective = String(document.getElementById("adjectiveOne").value);
var secondAdjective = String(document.getElementById("adjectiveTwo").value);
var thirdAdjective = String(document.getElementById("adjectiveThree").value);
var secondPerson = String(document.getElementById("personTwo").value);
var fourthAdjective = String(document.getElementById("adjectiveFour").value);
var firstNumber = Number(document.getElementById("numberOne").value);
var thirdPerson = String(document.getElementById("personThree").value);
document.getElementById("madLibCreation").innerHTML = "Dear " + firstPerson + ",Overall, the camp is " + firstAdjective + "The camp counselors are " + secondAdjective + "and the food is " + thirdAdjective + ".Today, I met someone named " + secondPerson + "and we become " + fourthAdjective + "friends. I hope to write to you in " + firstNumber + "days.Sincerely," + thirdPerson + ".";
}
</script>
</head>
<body>
<h3>
Welcome to Mad Libs! Please type in the prompted Information. Then press the submit button. Have fun!
</h3>
<p>
Name of Person in Room: <input type="text" id="personOne">
</p>
<p>
Adjective: <input type="text" id="adjectiveOne">
</p>
<p>
Adjective: <input type="text" id="adjectiveTwo">
</p>
<p>
Adjective: <input type="text" id="adjectiveThree">
</p>
<p>
Name of Someone: <input type="text" id="personTwo">
</p>
<p>
Adjective: <input type="text" id="adjectiveFour">
</p>
<p>
Number: <input type="text" id="numberOne">
</p>
<p>
Name of Someone: <input type="text" id="personThree">
</p>
<p>
<input type="submit" value="Get My MadLib Creation!" onclick="getVars();">
</p>
<p id="madLibCreation"></p>
</body></html>

Entering multiple records on same HTML page

I am creating a JS form where i need 3 inputs from user and after typing the 3 inputs , on clicking 'Add record' button ,it should display them on the same page one after another (line by line) for every button click. With my code, it is writing every new input entry in the same line and not next line. How do i do it ?
My result:
Andrew Arts 2007 Evelyn Computers 2006
Expected result :
Andrew Arts 2007
Evelyn Computers 2006
function doSubmit() {
document.getElementById('f1').innerHTML += document.myform.name.value + " ";
document.getElementById('f1').innerHTML += document.myform.major.value + " ";
document.getElementById('f1').innerHTML += document.myform.year.value + " ";
return false;
}
<body>
<form name="myform">
<p>
Name: <input name="name" size="30" type="text" /> course: <input name="major" size="30" type="text" /> Year : <input name="year" size="4" type="text" />
</p>
<input type="button" value="Add record" onClick='doSubmit(); return false' />
</form>
<p id='f1'></p>
</body>
You use a <br> tag to break the line inside a <p> tag.
You just have to make a small change in your function :
function doSubmit() {
document.getElementById('f1').innerHTML += document.myform.name.value + " ";
document.getElementById('f1').innerHTML += document.myform.major.value + " ";
document.getElementById('f1').innerHTML += document.myform.year.value + " ";
document.getElementById('f1').innerHTML +='<br />'
return false;
}
If you're looking to style your form values , it would be good to append <p>tag for each form value . It will require a small change like below :
function doSubmit() {
document.getElementById('form-value').innerHTML += '<p>'+ document.myform.name.value + " " + document.myform.major.value + " " + document.myform.year.value + " " + "</p>";
return false;
}
Your HTML :
<body>
<form name="myform">
<p>
Name: <input name="name" size="30" type="text" /> course: <input name="major" size="30"
type="text" /> Year : <input name="year" size="4" type="text" />
</p>
<input type="button" value="Add record" onClick='doSubmit(); return false' />
</form>
<div id="form-value">
</div>
I would suggest creating a new p element for every submitted input. You also don't want to store the user input into the innerHTML, because it can lead to cross-site scripting attacks. To prevent this, you can use innerText instead. Here is an example of how you can achieve all that with your code:
function doSubmit() {
const newInputParagraph = document.createElement("p");
newInputParagraph.innerText += document.myform.name.value + " ";
newInputParagraph.innerText += document.myform.major.value + " ";
newInputParagraph.innerText += document.myform.year.value + " ";
document.getElementById("inputs").appendChild(newInputParagraph);
}
And you need to add container for input results (simple div) to your markup, for example like this:
<form name="myform">
<p>
Name: <input name="name" size="30" type="text" /> course: <input name="major" size="30" type="text" /> Year : <input name="year" size="4" type="text" />
</p>
<input type="button" value="Add record" onClick='doSubmit(); return false' />
</form>
<div id="inputs"></div>

I have a form with the submit button linked to javascript function but nothing is happening when I click the submit button

I'm trying to make a form which when I click the submit button will send the information from the form fields to a javascript function and then show the results to the user. I've made something like this before that's very similar and works fine, but for some reason this isn't doing anything when I click submit. I must have missed something. Here's the code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" >
<title>Javascript Form</title>
</head>
<body>
<form id="formID" name="myform" action="" method="get">
Customer Name:
<input type="text" name="names" value="">
<br/>
Street Address:
<input type="text" name="street" value="">
<br/>
City:
<input type="text" name="city" value="">
<br/>
State:
<input type="text" name="state" value="">
<br/>
Zip Code:
<input type="text" name="zip" value="">
<br/>
Beginning Odometer Reading:
<input type="text" name="beginO" value="">
<br/>
Ending Odometer Reading:
<input type="text" name="edinO" value="">
<br/>
Number of Days Car was Used:
<input type="text" name="days" value="">
<br/>
<input type="button" name="button" value="Submit" onClick="car(this.form)">
</form>
<script type="text/javascript">
function car(form) {
var names = form.names.value;
var street = form.street.value;
var city = form.city.value;
var state = form.state.value;
var zip = form.zip.value;
var beginO = form.beginO.value;
var endO = form.endO.value;
var days = form.days.value;
var miles = endO - beginO;
var charge = days * 15 + miles * 0.12;
alert("Miles driven: " + miles + ". Charge: " + charge + ". Name: " + names + ". Address : " + street + " , " + city + " " + state + " " + zip + ". ");
}
</script>
</body>
</html>
It's because you have a JavaScript error at this line:
var endO = form.endO.value;
You have a typo in your form element name:
<input type="text" name="edinO" value="">
form.endO is undefined, so getting value throws an error.

Categories

Resources