Question

Javascript ‘类型错误未捕获 TypeError:无法设置未定义的属性‘backgroundColor’’但有效

2019-01-25

3295

javascript

我对 JavaScript 中的 backgroundColor 属性存在问题，但无论出现什么错误，我的函数都能继续工作。

有人能解释一下这是怎么回事吗？ Fiddle 链接

谢谢

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";
 }

Answer 1

这是您的错误：

champ.addEventListener("blur", verifMail);
function verifMail(champ) {

将其更改为：

champ.addEventListener("blur", verifMail);
function verifMail() {

Champ 已在文件顶部定义，通过在 verifyMail 函数中添加一个参数，您可以使该函数不再能够查看文件顶部的 champ 变量，而是看到 blur 事件。

它改变颜色的原因是因为您从 verifForm 函数调用 verifMail ，并传递了 champ 参数。

Answer 2

失去焦点会触发模糊。奇怪的是模糊先出现。这就是为什么失去焦点时你的函数再次被调用，所以你的错误发生了。我已经用变量值纠正了它，希望它能帮助你

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">&times;</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>

Answer 3

champ.style.backgroundColor = "";

背景颜色应该设置为某个值，怎么能是空白的呢？

sskini

2019-01-25