Блог

Главная - Вопросы по программированию - Скрипт не работает в скобках, но работает на этой веб-консоли

Скрипт не работает в скобках, но работает на этой веб-консоли

#javascript #html #css

Вопрос:

Я не знаю почему, но когда я пытаюсь использовать «app.js» файл (который содержит 2 сценария) в скобках, только один из них работает, но на консоли этого веб-сайта оба сценария работают в то время, кто-нибудь знает, почему? Спасибо!

(Два сценария-один и тот же код, но я просто изменил некоторые имена, они из Интернета, я понятия не имею о js).

 const togglePassword1 = document.querySelector('#togglePassword1');
const password1 = document.querySelector('#password1');

togglePassword1.addEventListener('click', function(e) {
  // toggle the type attribute
  const type = password1.getAttribute('type') === 'password' ? 'text' : 'password';
  password1.setAttribute('type', type);
  // toggle the eye / eye slash icon
  this.classList.toggle('bi-eye');
});

const togglePassword2 = document.querySelector('#togglePassword2');
const password2 = document.querySelector('#password2');

togglePassword2.addEventListener('click', function(e) {
  // toggle the type attribute
  const type = password2.getAttribute('type') === 'password' ? 'text' : 'password';
  password2.setAttribute('type', type);
  // toggle the eye / eye slash icon
  this.classList.toggle('bi-eye');
}); 
 body{
    font-family: 'Montserrat', sans-serif;
    background-color: #F5BED8;
    width: 100%;
}

.password1 i {
    margin-left: -30px;
    cursor: pointer;
}
.password2 i {
    margin-left: -30px;
    cursor: pointer;
}

.password_tittle{
    font-family: 'montserrat';
    font-size:1.4em;
    font-weight: 550;
    color: #fcecf5;
    margin-left: 40px;
    margin-top: 40px;
    margin-bottom: 10px
}

.password_input{
    width:420px;
    height: 35px;
    margin-left: 40px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 1px  #2d9fd9;
}
.password_input::placeholder{
    font-size: 1.2em;
    padding-left: 10px;
    font-family: 'montserrat';
    font-weight:100;
    font-style: italic;
}

.confirm_password_input{
    width:420px;
    height: 35px;
    margin-left: 40px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 1px  #2d9fd9;
}
.confirm_password_input::placeholder{
    font-size: 1.2em;
    padding-left: 10px;
    font-family: 'montserrat';
    font-weight:100;
    font-style: italic;
} 
 <head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />

</head>

<body>

<div class="password1">
                        
                    <p class="password_tittle">Password</p>

                        <input class="password_input" type="password" name="password" id="password1" placeholder="Password..." />
                        <i class="bi bi-eye-slash fa-lg" id="togglePassword1"></i>

                        <script type='text/javascript' src="app.js"></script>

                    </div>
                    
                    <div class="password2">
                        
                        <p class="password_tittle">Confirm Password</p>

                        <input class="confirm_password_input" type="password" name="password" id="password2" placeholder="Confirm Password..." />
                        <i class="bi bi-eye-slash fa-lg" id="togglePassword2"></i>
                        
                    </div>

Комментарии:

1. Не в состоянии воспроизвести

2. является ли ваш app.js файл в той же папке html-файла?

3. Нет, но проверьте в консоли браузера, есть ли у вас какие-либо ошибки в файле js, или попробуйте поместить файл js перед концом тега тела

4. Ок, ошибка устранена, консоль выдает вам строку ошибки, поэтому проверьте, установлена ли ваша переменная const

5. Я воспроизвел вашу ошибку, просто поставьте <script type='text/javascript' src="app.js"></script> </body> тег «Перед», и все работает нормально

Метки: ,