Понимание логики c за JS Событием и обработчиком - PullRequest
Новая
       3

Понимание логики c за JS Событием и обработчиком

2 голосов
/ 11 февраля 2020

Ниже приведен код JS / Html, который я написал для проверки имени и фамилии. Когда поле оставлено пустым, оно будет отображаться красным цветом, а когда поле не оставлено пустым, оно будет отображаться зеленым цветом.

Теперь, может кто-нибудь помочь мне разобраться в логике c за этой строкой код? 

var control = document.getElementById(controlID);

Вот полная программа ... 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function validateRequiredFields(controlID) {
            var control = document.getElementById(controlID);  //Why are we assigning this to a variable ? what is happening at this code. 
            control.style.color = 'white';

            if (control.value == "") {
                control.style.background = 'red';
            } else {
                control.style.background = 'green';
            }
        }
    </script>
</head>

<body>
    <p> Below is the First Name and Last Name Validation Example. </br>
        1. When the field is blank, it will show red color.</br>
        2. When the field is not blank, it wil show green color.</br>
    </p>
    <table>
        <tr>
            <td>
                First name
            </td>
            <td>
                <input type="text" id="txtFirstName" onkeyup="validateRequiredFields('txtFirstName')"
                    onblur="validateRequiredFields('txtFirstName')">
            </td>
        </tr>
        <tr>
            <td>
                Last Name
            </td>
            <td>
                <input type="text" id="txtLastName" onkeyup="validateRequiredFields('txtLastName')"
                    onblur="validateRequiredFields('txtLastName')">
            </td>
        </tr>
    </table>
</body>

</html>

Ответы [ 5 ]

0 голосов
/ 11 февраля 2020

"document.getElementById (controlID);"

Так что это метод javascript для выбора чего-либо в html (DOM), как следует из названия, это селектор, который использует идентификатор тега html и поиск и выбор его в html (DOM).

Как только метод находит соответствующий идентификатор, функция возвращает сам элемент html, соответствующий выбранному тегу, и он сохраняется в элементе управления переменной:

var control = document.getElementById (controlID );

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

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

0 голосов
/ 11 февраля 2020

По вашим вопросам. Почему мы присваиваем это переменной?

Чтобы избежать многократного написания одного и того же фрагмента кода.

что происходит при этом code.

Сохраняет ссылку на элемент DOM, чтобы его можно было использовать для динамического обновления атрибутов тега HTML на лету.

Как и в ваш код, который вы видите, вы обновляете по ссылке: control.style.background = 'red';

0 голосов
/ 11 февраля 2020

При выполнении var control = document.getElementById(controlID); Вы отправляете идентификатор узла DOM для работы и извлекаете ссылку на узел DOM и считываете ее в другую переменную, так что вам не нужно вызывать document.getElementById(controlID); несколько раз, так как это дорогая операция -

0 голосов
/ 11 февраля 2020

Почему мы присваиваем это переменной? что происходит в этом коде.

control используется четыре раза после присвоения ему значения.

Если вы не присвоили возвращаемое значение document.getElementById(controlID) для control затем:

  • Код был бы длиннее и менее читаемым
  • Функция должна была бы вызываться несколько раз (что менее эффективно, хотя и не так сильно в данном случае). ситуация)
0 голосов
/ 11 февраля 2020

в основном вы обращаетесь к узлу DOM с переданным идентификатором controlID , если у вас есть ссылка на него, вы можете поиграть с ним, в этом случае настроить стиль 

<input id="someId" .... />
...