我在 JavaScript 中的 backgroundColor 属性有问题，但我的函数继续工作，无论错误如何。
有人可以解释一下，这是怎么发生的吗？小提琴链接
谢谢
有错误的JavaScript代码：
function surligne(champ, erreur)
{
if(erreur)
{
champ.style.backgroundColor = "#fba";
document.getElementById("messageErreur").style.display ="block";
}
else
{
champ.style.backgroundColor = "";
document.getElementById("messageErreur").style.display ="none";
}
这是你的错误：
champ.addEventListener("blur", verifMail);
function verifMail(champ) {
将其更改为：
champ.addEventListener("blur", verifMail);
function verifMail() {
Champ 已经在文件顶部定义，通过在 verifyMail 函数上添加一个参数，可以使函数不再查看文件顶部的 champ 变量，而是看到模糊事件。
它更改颜色的原因是，您从 verifForm 函数调用 verifMail，传递 champ 参数。
焦点丢失会触发模糊。奇怪的是模糊首先出现，这就是为什么在聚焦时，您的函数再次调用，因此发生了错误。我已经用变量值纠正了它，希望它能帮助你
如果将警报更改为控制台.log（或不窃取焦点的内容），您将看到事件正确触发。
var modal = document.getElementById('maPopin');
var btn = document.getElementById("monBouton");
var span = document.getElementsByClassName("fermer")[0];
var champ = document.getElementById("mail");
var erreur = true;
btn.addEventListener("click", function() {
modal.style.display = "block";
});
span.addEventListener("click", function() {
modal.style.display = "none";
});
window.addEventListener("click", function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
});
champ.addEventListener("blur", verifMail);
champ.addEventListener("focus", verifMail);
function verifMail(champ)
{
var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}.[a-z]{2,4}$/;
if(!regex.test(champ.value))
{
surligne(champ, true);
return false;
}
else
{
surligne(champ, false);
return true;
}
}
function surligne(champ, erreur)
{ if(champ.type !="focus" && champ.type !=="blur"){
if(erreur)
{
champ.style.backgroundColor = "#fba";
document.getElementById("messageErreur").style.display ="block";
}
else
{
champ.style.backgroundColor = "";
}
}
document.getElementById("messageErreur").style.display ="none";
}
/* } */
champ.addEventListener("keyup", verifForm);
function verifForm()
{
var mailOk = verifMail(champ);
if(mailOk)
{
document.getElementById('submit1').disabled=0;
return true;
}
else
{
document.getElementById('submit1').disabled=1;
return false;
document.getElementById("messageErreur").style.display ="none";
}
}body {font-family: Arial, Helvetica, sans-serif;}
/* Background pop-in */
.popin {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
/* Style de la pop-in */
.popin-style {
background-color: #FFFFFF;
margin: auto;
padding: 20px;
border: 1px solid #529D93;
width: 35%;
}
/* Bouton fermer */
.fermer {
color: #3f3f3f;
float: right;
font-size: 40px;
font-weight: bold;
}
.bob-style
{
width: 50%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.fermer:hover,
.fermer:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
#messageErreur
{
display: none;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<body>
<h2>Exemple de Pop-in</h2>
<button id="monBouton">Qui sommes nous ?</button>
<div id="maPopin" class="popin">
<div class="popin-style">
<span class="fermer">×</span>
<p>Cet objectif a été réalisé par Guillaume et Nicolas... Alias Bob et Patrick </p>
<img src="http://www.chamalow-shop.com/images/t/tds/TDS-bob-patrick-geek-vert-g.gif" class="bob-style">
<form>
<label for="email">Veuillez saisir votre email :</label>
<input type="text" name="email" id="mail" placeholder="Email...">
<button type="submit" id="submit1" disabled="disabled">Envoyer</button>
<p id="messageErreur">Adresse email incorrecte</p>
</form>
</div>
</div>
<script src="myscripts.js"></script>
</body>
</html>champ.style.backgroundColor = ";
背景颜色应该设置为某个值，怎么可能是空白的？