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>
Related
The user can add a new input-field with a click on "Add". My problem is that there is no limit but I want to limit the max. input-fields to 50. Im not that good with js but I think it could done with:
if id or input-field = 50
than disable Add-button. And enable if id or input-field is under 50.
This is my code so far:
function addFormField() {
var id = document.getElementById("id").value;
$("#divTxt").append(
"<p id='row" +
id +
"'><label for='txt" +
id +
"'>Field " +
id +
" <input type='text' size='20' name='txt[]' id='txt" +
id +
"'>  <a href='#' onClick='removeFormField(\"#row" +
id +
"\"); return false;'>Remove</a><p>"
);
id = id - 1 + 2;
document.getElementById("id").value = id;
}
function removeFormField(id) {
$(id).remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Add</p>
<form action="#" method="get" id="form1">
<input type="hidden" id="id" value="1">
<div id="divTxt"></div>
<p><input type="submit" value="Submit" name="submit">
<input type="reset" value="Reset" name="reset"></p>
</form>
Thank you
You can set a variable and add 1 to it until the count reaches 50 like this
let currentCount = 0;
function addFormField() {
if(currentCount < 50){
currentCount+= 1;
var id = document.getElementById("id").value;
$("#divTxt").append(
"<p id='row" +
id +
"'><label for='txt" +
id +
"'>Field " +
id +
" <input type='text' size='20' name='txt[]' id='txt" +
id +
"'>  <a href='#' onClick='removeFormField(\"#row" +
id +
"\"); return false;'>Remove</a><p>"
);
id = id - 1 + 2;
document.getElementById("id").value = id;
}else{
alert('You can not add more then 50')
}
}
function removeFormField(id) {
$(id).remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Add</p>
<form action="#" method="get" id="form1">
<input type="hidden" id="id" value="1">
<div id="divTxt"></div>
<p><input type="submit" value="Submit" name="submit">
<input type="reset" value="Reset" name="reset"></p>
</form>
You have to check for the length of child p tags of your div like this:
if($("#divTxt > p").length) < 50 ){
var id = document.getElementById("id").value;
$("#divTxt").append(
"<p id='row" +
id +
"'><label for='txt" +
id +
"'>Field " +
id +
" <input type='text' size='20' name='txt[]' id='txt" +
id +
"'>  <a href='#' onClick='removeFormField(\"#row" +
id +
"\"); return false;'>Remove</a><p>"
);
id = id - 1 + 2;
document.getElementById("id").value = id;
}
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>
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>