I am creating a sample MabLibs type thing in HTML and JS. When the person inputs stuff in a field, it will use that to create their own MadLib.
I've done a little research and not finding exactly what I am looking for. Say a person puts 12 in the Name field. How would code that so if this instance does happen, it won't go through and alert "That is not a valid input. PLease type again!" or something along those lines.
The code I am using is below. I am very new to Javascript so I know the format and stuff might be wrong.
<html><head>
<title>
Mad Libs Story
</title>
<script>
function getVars() {
person1 = String(document.getElementById("personOne").value);
age = Number(document.getElementById("ageOne").value);
firstAdjective = String(document.getElementById("adjective").value);
document.getElementById("madLibCreation").innerHTML = "There once was a person named " + person1 + ". She was " + age + " and very " + firstAdjective = ".";
}
</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>
Age: <input type="text" id="ageOne">
</p>
<p>
Adjective: <input type="text" id="adjective">
</p>
<input type="submit" value="Get My MadLib Creation!" onclick="getVars();">
<p id="madLibCreation"></p>
</body></html>
For that, you have to check Name field value is number or not. We can check the value is number or not using isNaN function. This function returns true or false.
isNaN(12) // falsee
isNaN(-4.5) // false
isNaN(15-3) // false
isNaN(0) // false
isNaN('123') // false
isNaN('Nuwan') // true
isNaN('2005/12/12') // true
isNaN() // true
So, in your code getVars() function change like this
function getVars() {
var name = document.getElementById("personOne").value;
if(!isNaN(name) && name.length != 0){
alert("That is not a valid input. PLease type again!");
}else{
person1 = String(document.getElementById("personOne").value);
age = Number(document.getElementById("ageOne").value);
firstAdjective = String(document.getElementById("adjective").value);
document.getElementById("madLibCreation").innerHTML = "There once was a person named " + person1 + ". She was " + age + " and very " + firstAdjective + ".";
}
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments