Электронная почта формы начальной загрузки, диапазон и кнопка «отключены», но почему?

Почему я не могу изменить диапазон, ввести адрес электронной почты или нажать кнопку? И мой javascript тоже не получает событие... я такой глупый. я узнаю это никогда в жизни.

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

Счастливых праздников. Оставайтесь в безопасности.

"use strict"

let formular = document.querySelector("form");

formular.addEventListener("submit", e => {
    e.preventDefault();
    console.info(e);
});

body {
    background: rgb(14,108,255);
    background: linear-gradient(49deg, rgba(14,108,255,0.5326505602240896) 0%, rgba(0,84,171,0.4654236694677871) 24%, rgba(14,173,255,0.4430147058823529) 66%, rgba(14,92,255,0.4206057422969187) 100%);
}

.fontBGtrans {
    background-color: #ffffff8a; 
    
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }

<!DOCTYPE html>
<html lang = "de">
<head>
    <meta charset = "UTF-8">
    <!-- Made it responsive -->
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">

    <title>Some TExt</title>

    <!-- Bootstrap CSS loading -->
    <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity = "sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin = "anonymous">
    <!-- Loading my css -->
    <link rel = "stylesheet" href = "css/style.css">
</head>
<body>

<!-- ### NAVIGATION AREA -->

<nav class = "navbar navbar-expand-lg navbar-light fixed-top" style = "background-color: #e3f2fd;">
  <a class = "navbar-brand" href = "index.html">Some TExt</a>
  <button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarNavDropdown" aria-controls = "navbarNavDropdown" aria-expanded = "false" aria-label = "Toggle navigation">
    <span class = "navbar-toggler-icon"></span>
  </button>
  <div class = "collapse navbar-collapse" id = "navbarNavDropdown">
    <ul class = "navbar-nav">
      <li class = "nav-item active">
        <a class = "nav-link" href = "index.html">Home</a>
      </li>
      <li class = "nav-item">
        <a class = "nav-link" href = "#">Some TExt</a>
      </li>  
      <li class = "nav-item">
        <a class = "nav-link" href = "#">Some TExt <span class = "sr-only">(current)</span></a>
      </li>      
      <li class = "nav-item dropdown">
        <a class = "nav-link dropdown-toggle" href = "#" id = "navbarDropdownMenuLink" role = "button" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
          Some TExt
        </a>
        <div class = "dropdown-menu" aria-labelledby = "navbarDropdownMenuLink">
          <a class = "dropdown-item" href = "oldtimer-und-youngtimer.html">Some TExt </a>
          <a class = "dropdown-item" href = "#">Some TExt</a>
          <a class = "dropdown-item" href = "#">Some TExt</a>
          <a class = "dropdown-item" href = "#">Some TExt</a>
          <a class = "dropdown-item" href = "#">Some TExt</a>
          <a class = "dropdown-item" href = "#">Some TExt</a>
          <a class = "dropdown-item" href = "#">Some TExt</a>
          <a class = "dropdown-item" href = "#">Some TExt</a>
          <a class = "dropdown-item" href = "#">Some TExt</a>
          <a class = "dropdown-item" href = "#">Some TExt</a>
          <a class = "dropdown-item" href = "#">Some TExt</a>
        </div>
      </li>
      <li class = "nav-item">
        <a class = "nav-link" href = "#">Impressum</a>
      </li>
    </ul>
  </div>
</nav>
      <div class = "container" style = "margin-top: 4rem;">
        <div class = "card bg-light mb-3 shadow p-3 mb-5 bg-white rounded">
          <img src = "..." class = "card-img-top" alt = "Some TExt">
          <div class = "card-img-overlay">
      </div>
          <div class = "card-body calculator">
            <h1 class = "card-title"> Some TExt</h1>
            <p class = "card-text text-justify">Some TExt </p>
            <form id = "calculator-form">
              <div class = "form-group">
                <div class = "row">
                  <div class = "col">
                    <div class = "input-group mb-3">
                      <div class = "input-group-prepend">
                        <label class = "input-group-text" for = "inputGroupSelect01">Some TExt</label>
                      </div>
                      <select class = "custom-select" id = "inputGroupSelect01">
                        <option selected>PKW Motor</option>
                        <option value = "1">Some TExt</option>
                        <option value = "2">Some TExt</option>
                        <option value = "3">Some TExt</option>
                        <option value = "4">Some TExt.</option>
                      </select>
                    </div>
                  </div>
                  <div class = "col">
                    <div class = "input-group mb-3">
                      <div class = "input-group-prepend">
                        <span class = "input-group-text">Some TExt</span>
                      </div>
                      <input type = "number" class = "form-control" aria-label = "area" placeholder = "Some TExt">
                    </div>
                  </div>
                </div><br>
                    <div class = "input-group mb-3">
                      <div class = "input-group-prepend">
                        <label class = "input-group-text" for = "inputGroupSelect01">Some TExt</label>
                      </div>      
                      <select class = "custom-select" id = "inputGroupSelect01">
                        <option selected>Some TExt</option>
                        <option value = "1">Some TExt</option>
                        <option value = "2">Some TExt</option>
                        <option value = "3">Some TExt</option>
                        <option value = "4">Sonstiges</option>
                      </select>
                    </div><br>
                    <div class = "form-group mb-3">
<!-- ### RANGE -->
                      <label for = "formControlRange">WHY DOESNT WORK???</label>
                      <input type = "range" class = "form-control-range" id = "formControlRange">
                    </div>
                      <br>
                       <p style = "text-align: center;">Some TExt</p>
                          <!-- ### ZIP CODE -->
                    <div class = "input-group mb-3">
                      <div class = "input-group-prepend">
                        <span class = "input-group-text">ZIP CODE</span>
                      </div>
                      <input type = "number" class = "form-control" aria-label = "area" placeholder = "Für ein Angebot aus Ihrer Region">
                    </div>
                    <div class = "form-group mb-3">
<!-- ### EMAIL -->
                      <label for = "customermail"></label>
                      <input type = "email" class = "form-control" id = "customermail" aria-describedby = "emailHelp" placeholder = "MAILADRESS - WHY DOESNT WORK???">
                      <small id = "emailHelp" class = "form-text text-muted">WHY DOESNT WORK???</small>
                    </div><br>
                    <div class = "form-group mb-3 form-check">
                      <input type = "checkbox" class = "form-check-input" id = "exampleCheck1">
                      <label class = "form-check-label" for = "exampleCheck1">Some TExt</label>
                    </div>
<!-- ### BTTN -->
                    <button type = "submit" class = "btn btn-primary">WHY DOESNT WORK</button>
                    <br><br>
                    <!-- <button type = "button" class = "btn btn-primary btn-lg btn-block">Kosten jetzt online berechnen</button><br> -->
              </div>
            </form>
              <p class = "card-text text-center"><small class = "text-muted">Some TExt</small></p>
          </div>
        </div>
      </div> 
    <!-- Bootstrap JavaScript loading -->
    <script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous"></script>
    <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin = "anonymous"></script>
    <script src = "calculator.js"></script>
</body>
</html>

Осмотрите, есть какой-то оверлейный div, который не позволяет вам щелкнуть/заполнить форму

— 24.12.2020 16:28

javascript html bootstrap-4

24.12.2020 16:20

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

<div class = "card-img-overlay"></div> находится над элементами формы. Вы можете решить эту проблему, добавив pointer-events: none к .card-img-overlay, чтобы сделать его прозрачным. Он также должен работать с z-index.

Да, теперь это работает. Можете ли вы объяснить мне, почему? Я хочу использовать этот div, чтобы написать текст в качестве наложения на изображение class = "card-img-top", но я отказался от этого.

— 24.12.2020 16:38

24.12.2020 16:32