Я создаю пример типа MabLibs в HTML и JS. Когда человек вводит материал в поле, он использует его для создания своей собственной MadLib.

Я провел небольшое исследование и не нашел именно то, что я ищу. Скажем, человек вводит 12 в поле Имя. Как бы это закодировать, если этот экземпляр произойдет, он не пройдет и выдаст предупреждение «Это неверный ввод. PLease type again!» Или что-то вдоль этих линий.

Код, который я использую ниже. Я очень новичок в Javascript, поэтому я знаю, что формат и вещи могут быть неправильными.

{amp}lt;html{amp}gt;{amp}lt;head{amp}gt; {amp}lt;title{amp}gt; Mad Libs Story {amp}lt;/title{amp}gt; {amp}lt;script{amp}gt; 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 = "."; } {amp}lt;/script{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;h3{amp}gt; Welcome to Mad Libs! Please type in the prompted Information. Then press the submit button. Have fun! {amp}lt;/h3{amp}gt; {amp}lt;p{amp}gt; Name of Person in Room: {amp}lt;input type="text" id="personOne"{amp}gt; {amp}lt;/p{amp}gt; {amp}lt;p{amp}gt; Age: {amp}lt;input type="text" id="ageOne"{amp}gt; {amp}lt;/p{amp}gt; {amp}lt;p{amp}gt; Adjective: {amp}lt;input type="text" id="adjective"{amp}gt; {amp}lt;/p{amp}gt; {amp}lt;input type="submit" value="Get My MadLib Creation!" onclick="getVars();"{amp}gt; {amp}lt;p id="madLibCreation"{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;/body{amp}gt;{amp}lt;/html{amp}gt; 

Шеннон Сирл

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,

Для этого вы должны проверить, что поле Имя имеет значение номер или нет. Мы можем проверить значение является числом или не используя функцию isNaN. Эта функция возвращает истину или ложь.

 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) {amp}amp;{amp}amp; 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   "."; } } 

https://www.w3.org/WAI/tutorials/forms/validation/

Эта ссылка содержит некоторую полезную информацию и пример кода о том, как вы можете сделать это с HTML5, предоставляя проверки и необходимые входные данные для каждого поля ввода.

При выполнении этих проверок ваша форма не будет отправлена ​​до тех пор, пока не будут выполнены требования.

Вот несколько других идей, которые также могут помочь:

Используя

 {amp}lt;form onsubmit="getVars()" name="MadLibs"{amp}gt; 

тег, ваши данные будут обернуты внутри события, которые могут быть доступны в вашей функции отправки. Это также уменьшит усилия по сбору данных с помощью идентификаторов элементов.

 const getVars = function(event) { event.preventDefault(); // stop the page refresh on submit const formData = event.target; const personOne = formData.personOne; ... } 

Наконец, добавив теги для каждого ввода, это еще больше увеличит доступность формы:

https://www.w3.org/WAI/tutorials/forms/labels/

Надеюсь, это поможет с вашим проектом.

Таким образом, вы хотите предотвратить неправильную информацию, прежде чем отправлять какую-либо вещь. Это может быть достигнуто путем некоторых проверок значения, введенного в поля. Это можно сделать сразу по нажатию кнопки или при вводе с помощью обработчика событий в поле для keyup. Вы также можете использовать setTimeout для проверки с небольшой задержкой.

Если вы проверяете и устанавливаете классы на элементы, которые являются неисправными, вы можете проверить их с помощью селектора css.

 const person1 = document.getElementById("personOne") const age = document.getElementById("ageOne") const firstAdjective = document.getElementById("adjective") // use a function(){} block for the handler, it will bin this person1.addEventListener(`keyup`, function(){ // use arrow function to not bind this so it will reffer to the html node // can be used to delay the evaluation setTimeout(()={amp}gt;{ // some regex... /regex/flags will create a new regex // ^ is start, $ is end and [az]* is a to z 0 or more times // flag i is case insensitive const regEx = /^[az] $/i // if(!regEx.test(person1.value)){ this.classList.add(`invalid`) } else { this.classList.remove(`invalid`) } },200) }) function getVars() { if(!document.querySelectorAll(`.invalid`)[0]){ document.getElementById("madLibCreation").innerText = `There once was a person named ${person1.value} she was ${age.value} and very ${firstAdjective.value}.` } else { alert(`fix your shit`) } } 
 .invalid{ color: red; } 
 {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;title{amp}gt; Mad Libs Story {amp}lt;/title{amp}gt; {amp}lt;meta charset='utf-8'{amp}gt; {amp}lt;meta name='viewport' content='width=device-width, initial-scale=1'{amp}gt; {amp}lt;link rel='stylesheet' type='text/css' media='screen' href='main.css'{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;h3{amp}gt; Welcome to Mad Libs! Please type in the prompted Information. Then press the submit button. Have fun! {amp}lt;/h3{amp}gt; {amp}lt;p{amp}gt; Name of Person in Room: {amp}lt;input type="text" id="personOne"{amp}gt; {amp}lt;/p{amp}gt; {amp}lt;p{amp}gt; Age: {amp}lt;input type="text" id="ageOne"{amp}gt; {amp}lt;/p{amp}gt; {amp}lt;p{amp}gt; Adjective: {amp}lt;input type="text" id="adjective"{amp}gt; {amp}lt;/p{amp}gt; {amp}lt;input type="submit" value="Get My MadLib Creation!" onclick="getVars()"{amp}gt; {amp}lt;p id="madLibCreation"{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;script src="./main.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/html{amp}gt; 

FUBAR

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,