HTMLとJSでサンプルのMabLibsタイプのものを作成しています。人がフィールドに入力すると、それを使用して独自のMadLibが作成されます。
私は少し調べましたが、探しているものが正確に見つかりませんでした。ある人が[名前]フィールドに12を入力するとします。このインスタンスが発生した場合、「それは有効な入力ではありません。もう一度入力してください!」という警告が表示されないように、どのようにコーディングしますか。またはそれらの線に沿った何か。
私が使用しているコードは以下のとおりです。私はJavascriptを初めて使用するので、形式や内容が間違っている可能性があることを知っています。
<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>
そのためには、名前フィールドの値が数値であるかどうかを確認する必要があります。isNaN関数を使用して、値が数値であるかどうかを確認できます。この関数はtrueまたは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
したがって、コードではgetVars()関数を次のように変更します
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 + ".";
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加