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          
<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          
<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>
Related
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>
I'm sure this is a simple fix but I don't see the problem. I was following a tutorial on making a JS Mad Lib and I wanted to experiment with the output. Adding more inputs. Well, when I put in all the inputs. It comes up blank. please keep in mind this is a project in progress and not the finished project. Any help is appreciated
const userprompts = document.querySelector("#prompts");
const story = document.querySelector("#story");
const error = document.querySelector("#error");
const submit = document.querySelector("#submit");
submit.addEventListener("click", completestory, false);
const reset= document.querySelector("#reset");
reset.addEventListener("click", resetPage, false);
document.querySelector('#name').focus();
const thename = document.querySelector("#name");
const firstverb = document.querySelector("#firstverb");
const firstnoun = document.querySelector("#firstnoun");
const adjective = document.querySelector("#adjective");
const secondnoun = document.querySelector("#secondnoun");
const adverb = document.querySelector("#adverb");
const storyOutput = document.querySelector("#storyOutput")
window.addEventListener("keydown", keydownHandler, false);
function keydownHandler(event) {
console.log("Enter key pressed");
}
function checkStory() {
}
function completestory() {
let finishedstory = "";
finishedstory += "There once was a person named " + thename.value + ". ";
finishedstory += "One day, " + thename.value + "was " + firstverb.value + "out in the "
+ firstnoun.value + ". ";
finishedstory += "All of a sudden, " + thename.value + "saw a " + adjective.value +
"dragon!" ;
finishedstory += thename.value + "thought for a second and did the only thing they could think of "
+ "They grabbed a " + secondnoun.value + ". " ;
finishedstory += "With the " + secondnoun.value + "in hand. " + thename.value + adverb.value + "attacked the dragon.";
finishedstory += "The dragon became very confused and left. The End";
storyOutput.innerHTML = finishedstory();
}
function resetPage() {
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="Mod3Layout.css">
<meta charset="utf-8">
<title>Sean's Mad Lib</title>
</head>
<body>
<h1> Sean's Wacky Mad Lib</h1><hr>
<div id="prompts">
<h3>Please enter your prompts here</h3>
<p>Enter a name here:
<input id="name" type="text" placeholder="name">
</p>
<p>Enter a verb here:
<input id="firstverb" type="text" placeholder="verb 1">
</p>
<p>Enter a noun here:
<input id="firstnoun" type="text" placeholder="noun 1">
</p>
<p>Enter an adjective here:
<input id="adjective" type="text" placeholder="adjective">
</p>
<p>Enter another noun here:
<input id="secondnoun" type="text" placeholder="noun 2">
</p>
<p>Finally, Enter an adverb here:
<input id="adverb" type="text" placeholder="adverb">
</p>
<button id="submit" type="button">Submit</button>
<p id="error">You did not answer all the questions. Please try
again</p>
</div>
<div id="story">
<p>Let's see what you wrote.</p>
<p id="storyOutput">Hello Dave</p>
<button id="reset" type="button" name="Reset">Reset</button>
</div>
You were receiving the error Uncaught TypeError: finishedstory is not a function because of this line in your completestory function:
storyOutput.innerHTML = finishedstory();
As you defined it, finishedstory is a String; just change that line to storyOutput.innerHTML = finishedstory; and the error no longer gets triggered.
const userprompts = document.querySelector("#prompts");
const story = document.querySelector("#story");
const error = document.querySelector("#error");
const submit = document.querySelector("#submit");
submit.addEventListener("click", completestory, false);
const reset= document.querySelector("#reset");
reset.addEventListener("click", resetPage, false);
document.querySelector('#name').focus();
const thename = document.querySelector("#name");
const firstverb = document.querySelector("#firstverb");
const firstnoun = document.querySelector("#firstnoun");
const adjective = document.querySelector("#adjective");
const secondnoun = document.querySelector("#secondnoun");
const adverb = document.querySelector("#adverb");
const storyOutput = document.querySelector("#storyOutput")
function checkStory() {
}
function completestory() {
let finishedstory = "";
finishedstory += "There once was a person named " + thename.value + ". ";
finishedstory += "One day, " + thename.value + "was " + firstverb.value + "out in the "
+ firstnoun.value + ". ";
finishedstory += "All of a sudden, " + thename.value + "saw a " + adjective.value +
"dragon!" ;
finishedstory += thename.value + "thought for a second and did the only thing they could think of "
+ "They grabbed a " + secondnoun.value + ". " ;
finishedstory += "With the " + secondnoun.value + "in hand. " + thename.value + adverb.value + "attacked the dragon.";
finishedstory += "The dragon became very confused and left. The End";
storyOutput.innerHTML = finishedstory;
}
function resetPage() {
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="Mod3Layout.css">
<meta charset="utf-8">
<title>Sean's Mad Lib</title>
</head>
<body>
<h1> Sean's Wacky Mad Lib</h1><hr>
<div id="prompts">
<h3>Please enter your prompts here</h3>
<p>Enter a name here:
<input id="name" type="text" placeholder="name">
</p>
<p>Enter a verb here:
<input id="firstverb" type="text" placeholder="verb 1">
</p>
<p>Enter a noun here:
<input id="firstnoun" type="text" placeholder="noun 1">
</p>
<p>Enter an adjective here:
<input id="adjective" type="text" placeholder="adjective">
</p>
<p>Enter another noun here:
<input id="secondnoun" type="text" placeholder="noun 2">
</p>
<p>Finally, Enter an adverb here:
<input id="adverb" type="text" placeholder="adverb">
</p>
<button id="submit" type="button">Submit</button>
<p id="error">You did not answer all the questions. Please try
again</p>
</div>
<div id="story">
<p>Let's see what you wrote.</p>
<p id="storyOutput">Hello Dave</p>
<button id="reset" type="button" name="Reset">Reset</button>
</div>
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>
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.
So I have a very basic assignment to finish and it it is to help us learn some very basic javascript. We have to make a form and when you click a button it preforms a javascript function. I can not figure out why it won't complete the function. Can someone troubleshoot my code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Order Page</title>
</head>
<body>
<form>
<label>First Name:<input type="text" id="fname" size="30" /><br><br>
<label>Last Name:<input type="text" id="lname" size="30" /><br><br>
<label>Number of Widgets:<input type="text" id="num" size="4" /><br><br>
<button onclick="myFunction()">Send</button>
</form>
<script>
function myFunction() {
var fname;
var lname;
var num;
lname = document.getElementById("lname").value;
fname = document.getElementById("fname").value;
num = document.getElementById("num").value;
alert("Thanks," + " " + fname + " " + lname + "for ordering" + num + " " + Widgets)
}
</script>
</body>
</html>
You should put quote around Widget like so:
alert("Thanks," + " " + fname + " " + lname + "for ordering" + num + " " + "Widgets");
Also you may want to put ';' at the end too.
Quick tip for you, you can catch this error easily by open a Dev-Console
In Google Chrome Press [Ctrl+Shift+J] you will see the error show up.
Hope this helps.
Trial again with this code!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Order Page</title>
<script type="text/javascript">
function myFunction() {
var fname;
var lname;
var num;
lname = document.getElementById("lname").value;
fname = document.getElementById("fname").value;
num = document.getElementById("num").value;
alert("Thanks, " + fname + " " + lname + "for ordering" + num + " " + "Widgets")
}
</script>
</head>
<body>
<form action="" name="from">
<label>First Name:<input type="text" id="fname" size="30" /><br><br>
<label>Last Name:<input type="text" id="lname" size="30" /><br><br>
<label>Number of Widgets:<input type="text" id="num" size="4" /><br><br>
<input type="button" onclick="myFunction()" value="Trial" />
</form>
</body>
</html>
Have you tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Order Page</title>
</head>
<body>
<form>
<label>First Name:</label><input type="text" id="fname" size="30" /><br><br>
<label>Last Name:</label><input type="text" id="lname" size="30" /><br><br>
<label>Number of Widgets:</label><input type="text" id="num" size="4" /><br><br>
<input type="button" onclick="myFunction()" value="Send" />
</form>
<script>
function myFunction() {
var fname;
var lname;
var num;
lname = document.getElementById("lname").value;
fname = document.getElementById("fname").value;
num = document.getElementById("num").value;
alert("Thanks," + " " + fname + " " + lname + "for ordering" + num + " Widgets");
document.document.getElementsByTagName("form")[0].submit();
}
</script>
</body>
</html>
You defined Widgets as variable but it is suppose to be a string.
function myFunction() {
var fname;
var lname;
var num;
lname = document.getElementById("lname").value;
fname = document.getElementById("fname").value;
num = document.getElementById("num").value;
alert("Thanks, "+fname + " " + lname + " for ordering " + num + " Widgets ")
}
Also you didnt mentioned the button type, so have added it.
<form>
<label>First Name:<input type="text" id="fname" size="30" /><br><br>
<label>Last Name:<input type="text" id="lname" size="30" /><br><br>
<label>Number of Widgets:<input type="text" id="num" size="4" /><br><br>
<button onclick="myFunction()" type ="button">Send</button>
</form>
Please check this JSFIDDLE for demo.
Hope this is useful
var btn = document.getElementById("btn");
btn.onclick = function() {
var fname;
var lname;
var num;
lname = document.getElementById("lname").value;
fname = document.getElementById("fname").value;
num = document.getElementById("num").value;
alert("Thanks, " + fname + " " + lname + "for ordering" + num + " " + "Widgets")
};
<form onsubmit="return false;">
<label>First Name:<input type="text" id="fname" size="30" />
<br/><br/>
<label>Last Name:<input type="text" id="lname" size="30" />
<br/><br/>
<label>Number of Widgets:<input type="text" id="num" size="4" />
<br/><br/>
<button id="btn">Send</button>
</form>