html введите текстовое поле «поле пароля» и кнопку для проверки правильности пароля для отображения «ОК» или «ОШИБКА» - PullRequest
0 голосов
/ 10 апреля 2019

Студент первого семестра здесь. Познакомиться с JavaScript в конце этого семестра. Профессор не вдавался в подробности. Я искал на W3schools и Google для помощи. В HTML я должен создать текстовое поле ввода (type = "text"), а кнопка (type = "button") отсутствует. Эта часть была простой.

Часть, которую я не понимаю, это JavaScript. Текстовое поле должно получить фокус при загрузке страницы. Я должен добавить JS внутри HTML-страницы, которая включает комментарий JS (не html-комментарий) и решает следующие задачи: Код события, которое будет выполняться, когда пользователь нажимает кнопку. Если пользователь вводит правильный пароль, отобразите «OK», на странице еще отобразите «ОШИБКА», чтобы ввести неверный пароль, нажмите другую кнопку, если она нажата. Размер шрифта тела изменен на 30 пикселей.

Теперь ... я понимаю, что это должен быть простой проект, и я ДОЛЖЕН быть в состоянии обратиться к моему профессору с вопросами, но это онлайн-класс, и он просто сбивает меня с толку, когда я обращаюсь за помощью. Я даже не знаю, что еще искать для этого. У W3schools нет ничего похожего. Пожалуйста помоги. Я просто не понимаю Я не хочу, чтобы это было сделано для меня. Бессмысленно просто добавлять чужой код в мой проект и не изучать то, что мне понадобится в будущем. Я ищу ресурсы, которые помогут мне лучше понять те части этого проекта, с которыми я борюсь. Спасибо!

w3schools Поиск в Google

<label for="password">Password:</label>
<input id="password" type="text" />
<input id="Button1" type="button" value="Run" onclick="passcheck()" />
<p id="result">
  result:
</p>

Ответы [ 2 ]

0 голосов
/ 10 апреля 2019

Добро пожаловать в мир JavaScript!

Насколько я понял, есть две вещи, которые вы хотите сделать. 1) фокусировка ввода на нагрузке 2) сделать проверку по нажатию кнопки 3) изменение размера шрифта с помощью JavaScript

Во-первых, чтобы сфокусировать любой элемент ввода на загрузке в JavaScript, нам нужно извлечь этот элемент, а затем мы можем просто вызвать функцию фокусировки в JavaScript.

<script>
   document.getElementById(“password”).focus();
</script>

В приведенном выше коде мы выбираем любой элемент (вход) с помощью getElementById, а затем устанавливаем его фокус, вызывая функцию focus ().

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

<script>
     function passcheck(){
        var password= document.getElementById(“password”).value;

         if(password == ‘your password’){
            alert(“Ok”);
        }else{
            alert(“invalid password”);
         }
     }
</script>

В приведенном выше коде значение является свойством элемента, и это фактическое значение, которое вы вводите при вводе (пароль).

В-третьих, вы можете создать функцию, подобную changeFont (), и вносить изменения.

<script>  
    function changeFont(){
        document.getElementById(“your element id”).fontSize=     “30px”
     }
</script>

Окончательный код JavaScript:

<script> 
document.getElementById(“password”).focus();


function passcheck(){
        var password= document.getElementById(“password”).value;

         if(password == ‘your password’){
            alert(“Ok”);
        }else{
            alert(“invalid password”);
         }
     }

 function changeFont(){
   document.getElementById(“your element id”).fontSize= “30px”
 }
</script>

Если вы хотите узнать больше о JavaScript, посетите w3schools

0 голосов
/ 10 апреля 2019

Вы можете попробовать что-то вроде этого:

<body>
<div>
  Password: 
  <input id="password" type="text" />
  <input id="Button1" type="button" value="Run" onclick="passcheck()" />
</div>
Result: <span id="result"/>
<script>

function passcheck() {
  const resultRef = document.getElementById('result');
  const inputRef = document.getElementById('password');

  /* You can pass any other condition 
     for checking the validity of the password
     instead of inputRef.value.length >= 6
  */
  const resultText = inputRef.value.length >= 6 ? 'OK' : 'ERROR';

  resultRef.innerHTML = resultText;
}
</script>
</body>

Кроме того, лучше использовать type = "password" для удобства использования https://www.w3schools.com/html/html_form_input_types.asp

Просто пройдите весь учебник по JS на w3schools https://www.w3schools.com/js/js_htmldom_methods.asp

Надеюсь, это вам поможет)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...