Javascript не загружается должным образом при <head> - PullRequest
Новая
       43

Javascript не загружается должным образом при <head>

0 голосов
/ 06 августа 2020

Код не работает, и я не могу понять почему. Я должен сохранить javascript в заголовке html, потому что это необходимо, и я считаю, что здесь я ошибаюсь, и он не загружается должным образом. Загрузка окна - это что-то новое для меня, и я не уверен, что это будет правильный способ его использования 

        ___Javascript___
        window.addEventListener("load", init);
       function validation(){
        var userNme = document.getElementById("username").value;
        var pass = document.getElementById("password").value;
        var id = document.getElementById("student-id").value;
        var success = false;
        var words = /^[A-Za-z]+$/;
        


        if(userNme.match(words)){
            document.getElementsByClassName("one").setAttribute("class", "hidden");
            success = true;
        }
        else{
            document.getElementsByClassName("one").setAttribute("class", "visible"); 
        }

        if(pass.match(/[a-z]/) && pass.match(/[A-Z]/) && pass.match(/[0-9]/)){
            document.getElementsByClassName("two").setAttribute("class", "hidden");
            success = true;
        }
        else{
            document.getElementsByClassName("two").setAttribute("class", "visible"); 
        }

        if(id.length == 9){
            document.getElementsByClassName("three").setAttribute("class", "hidden"); 
            success = true;
        }
        else{
            document.getElementsByClassName("three").setAttribute("class", "visible"); 
        }

        
   }
         function init(){
        var start = document.getElementById("go");
        start.addEventListener("click", validation);
    }
         __HTML__ 
         <input type="text" placeholder="Username" id="username" required>
    <div class="one hidden">
        Username needs to contain only letters
    </div>

    <input type="password" id="password" placeholder="Password" required>
    <div class="two hidden" id="Pword">
        Password needs to have at least one capital letter, one lower case, and one number
    </div>

    <input type="text" id="student-id" placeholder="Student id">
    <div class="three hidden">
        Student ID has to be exactly 9 numbers
    </div>

    <div class="four">
        <textarea id="textarea" name="message" placeholder="Enter text here" cols="22" rows="10" maxlength="25" onkeyup="myFunction()"></textarea>
        <span style="color: red;" id="counter">25</span>
        <span style="color: black;">words remaining</span>
    </div>

    
        
            <input type="button" value="Submit" placeholder="Submit" id="go" onclick="init()" >

Ответы [ 2 ]

2 голосов
/ 06 августа 2020

Это потому, что не все элементы смонтированы в DOM, если <script> находится в <head>. Вы используете <script> в <head>, когда хотите, чтобы javascript выполнялся независимо от монтируемых элементов.

Если ваш тег <script> пытается изменить объекты из DOM, вы должны дождитесь, пока элемент будет установлен первым.

Отредактировано:

Исправлено 1:

Оставить тег <script> под этими элементами. Вы также можете использовать все эти javascript в другом файле, а затем <script src="path/to/js"> под всеми элементами, которые используются в скрипте.

Fix 2:

If вы хотите держать это в голове, используйте load eventListener на <body>, а затем выполните весь этот код. Вместо window.addEventListener("load", init); используйте body.addEventListener("load", init).

0 голосов
/ 06 августа 2020

Saurav Pathak верен, ожидаемый формат для встроенного JS будет примерно таким: 

<head>
<script>
     // Some standard JS in here 
     // For readability I would but the event listeners at the end
     function validation(){
        var userNme = document.getElementById("username").value;
        var pass = document.getElementById("password").value;
        var id = document.getElementById("student-id").value;
        var success = false;
        var words = /^[A-Za-z]+$/;
        


        if(userNme.match(words)){
            document.getElementsByClassName("one").setAttribute("class", "hidden");
            success = true;
        }
        else{
            document.getElementsByClassName("one").setAttribute("class", "visible"); 
        }

        if(pass.match(/[a-z]/) && pass.match(/[A-Z]/) && pass.match(/[0-9]/)){
            document.getElementsByClassName("two").setAttribute("class", "hidden");
            success = true;
        }
        else{
            document.getElementsByClassName("two").setAttribute("class", "visible"); 
        }

        if(id.length == 9){
            document.getElementsByClassName("three").setAttribute("class", "hidden"); 
            success = true;
        }
        else{
            document.getElementsByClassName("three").setAttribute("class", "visible"); 
        }

        
       }
    function init(){
        var start = document.getElementById("go");
        start.addEventListener("click", validation);
    }
    window.addEventListener("load", init);
</script>
</head>

Вы также можете поместить все свои JS в отдельный файл и загрузить его следующим образом: <script src='/path/to/app.js'></script>

И последнее, на что следует обратить внимание: иногда вы хотите, чтобы остальная часть страницы отображалась до того, как вы получите теги с JS. Часто вы помещаете JS, зависящее от HTML элементов, которые будут отображаться в нижней части файла HTML (например, в теге <footer>).

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

Нет похожих вопросов

...