为什么我不能更改范围，键入电子邮件地址或点击按钮？而我的javascript也没有获得事件。我太笨了。我这辈子从没学过这个。
我用很多种输入创建了这个表单。数字，下拉列表和复选框都可以正常工作。我不明白。也许你发现了一个错误，可以帮我解决这个问题。
节日快乐。注意安全。
null
"use strict"
let formular = document.querySelector("form");
formular.addEventListener("submit", e => {
e.preventDefault();
console.log(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/bootstrap@4.5.3/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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="calculator.js"></script>
</body>
</html>null
