Jquery help does not appear

0

I have a problem on my site, I had the help of a forum member who gave me a jquery code, I put it to run on my site, but I have a problem with it, the warning that should be generated does not appear, Can someone help me?

#topo {
	background:url(../imagens/topo2etrelas2.png);
	border-left:1px solid #000;
	border-right:1px solid #000; 
	position:inherit;
	width:1024px;
	height:190px;
	margin:auto;
	

}


#fundoinicial {
	background: #FFF;
	width: 1024px;
	height: 500px;
	margin: auto;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
	
}

#mapa {
	position:absolute;
	width: 660px;
	top:250px;
	left: 181px;
	
	
}

#lugares {
	position: absolute;
	width: 250px;
	height: 250px;
	top: 500px;
	left: 851px;
}

#cep label{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	position: absolute;
	height: 20px;
	top: 362px;
	left: 780px;
	
}

#cep button{
	font-family: Arial, Helvetica, sans-serif;
	position: absolute;
	margin: auto;
	height: 21px;
	width: 71px;
	top: 358px;
	left: 1028px;
	padding: 0px 3px;
	background: #60365E;
	border-bottom: none;
	color: #FFF;
	border-radius:10px;
		
		
		
	
}
#cep input{
	position: absolute;
	width: 112px;
	top: 359px;
	left: 911px;
	height: 15px;
	border-radius:10px;
}

#cep p1{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	position: absolute;
	width: 109px;
	top: 388px;
	left: 854px;
}



#menufundo {
	background:#60365e;
	border:1px solid #000;
	position:relative;
	width:1024px;
	height:28px;
	margin:auto;
		
}


#ul li a{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-style:normal;
	list-style-type:none;
	display: inline;
	font-size:19px;
	line-height:0px;
	padding:10px;
    margin:4px 0 0 52px;
	color:#FFF;
	text-decoration:none;
	float:left;
	
	
}

#ul li a:hover{
	text-shadow:0px 0px 0px black,
				0px 0px 0px black,
				0px 0px 0px black,
				0px 0px 0px black;	
	font-size:19px;
    color:black;
}


.rodape {
	background: url(../imagens/rodape.png);
	margin: auto;
	position:absolute;
	width: 1056px;
	height: 99px;
	left: 132px;
	top: 704px;

	
	
}
	


h1 a{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 19px;
	color: #FFF;
	text-decoration: none;
	text-shadow: 1px 1px black;
	position: absolute;
	left: 175px;
	top: 716px;
	
}

p a{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #FFF;
	text-decoration: none;
	text-shadow: 1px 1px black;
	position: absolute;
	left: 175px;
	top: 743px;
}

.facebook{
	width: 32px;
	right: 32px;
	position: absolute;
	top: 25px;
	left: 515px;
	opacity: 0.5;
	filter: alpha(opacity=50);
	
}

.facebook:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.trabalhe {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 19px;
	color: #FFF;
	text-decoration: none;
	text-shadow: 1px 1px black;
	position: absolute;
	left: 986px;
	top: 729px;
	width: 159px;

}

.email {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #FFF;
	text-decoration: none;
	text-shadow: 1px 1px black;
	position: absolute;
	margin-top: 20px;
	left: 987px;
	top: 732px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alfatec</title>
<link rel="shortcut icon" href="imagens/ico.png" type="imagem/x-png" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/estilocobertura.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"  src="jquery/jquery-migrate-3.0.0.min.js" ></script>
<style type="text/css">
body {
	background-image: url(imagens/projeto/imagens/fundo.jpg);
}
</style>
<script>
$(document).ready(function(){

	var ceps = ['88000-000', '99000-000'], //array com os ceps válidos
  	aviso = $('p');
  
  $('button').on('click', function(){ //função para quando clicar no botão
  		cepDigitado = $('#cep').val(); //pega o valor do cep digitado
      aviso.html(''); //limpa o aviso
      
  		if (ceps.indexOf(cepDigitado) > -1) { //verifica se o cep é válido
    		aviso.html('CEP Válido!');
    	} else {
    		aviso.html('CEP Inválido!');
    	}
  });

});


</script>
</head>


<body>


<div id="topo"></div><!--div final topo-->
<div id="menufundo">

<nav id="ul">	  	
       			<ul>            
        			<li><a href="index.html" title="Página Inicial">Página Inicial</a></li> 
        			<li><a href="quem_somos.html" title="Quem Somos">Quem Somos</a></li>
        			<li><a href="cobertura.html" title="Áreas de Cobertura">Áreas de Cobertura</a></li> 
        			<li><a href="servicos.html" title="Serviços">Serviços</a></li>
        			<li><a href="fale_conosco.html" title="Fale Conosco">Fale Conosco</a></li>
    			</ul>
</nav>
</div>

        	
<div id ="fundoinicial">

<div id="mapa">
<img  src="imagens/mapa.jpg"  />
</div>
<div id="lugares">
<img src="imagens/lugares.jpg" />

</div>
</div>
<div id="cep">
  <label>Consulte Seu CEP:</label>
  					<input type="text" id="cep" />
	<button>Pesquisar</button>
	<p></p>
</div>

</div>


<div class="rodape">
  
  
  <a href="https://www.facebook.com/Alfatec-Autorizada-Electrolux-1737242946511224/" title="Facebook" target="_blank">
  <img id= "facebook"  src="imagens/facebook-logo (2).png" alt="FaceBook" width="24" class="facebook" > 
  </a>
  
  
</div>








<h1><a href="maps" target="_blank" title="Abrir Mapa">Localização</a></h1>
<p><a href="maps" target="_blank" title="Abrir Mapa">R. Profᵃ José Azevedo Minhoto, 206<br />
Osasco - SP, 06080-125</a></p2>

<div class="trabalhe" > <h2>Trabalhe Conosco</h2></div>
<div class="email" > <p>[email protected]</p></div>


</body>
</html>
    
asked by anonymous 11.06.2017 / 16:43

1 answer

1

Use the jquery.min.js library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  

OBS:Thewarningisbeingshowninallofthe<p>tagsinyourdocument.

Toavoidthisinsteadofusingaviso=$('p');inyourscriptuseaclasssuchasaviso=$('.paviso');

andinHTML<pclass="paviso"></p>

  

Other NOTE: An ID selector of a given name can only be set to ONE and only ONE HTML element within the document.

In your document we have <div id="cep"> and <input type="text" id="cep" /> with same id name. You can not define more than one element with the same id in a page.

<div id="cep">
<label>Consulte Seu CEP:</label>
                <input type="text" id="cep" />

Actually you can even define, but according to my experiences everything related to this id will only have an effect on the first element with that id name.

In your case, the script that takes the value of the id element with name cep will act on the div (which is before the input) and not on the input and consequently your script will not work as desired.

If the div was after input, your script would work !!

    
11.06.2017 / 18:48