Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Maira Torresani

Onclick não funciona!

Recommended Posts

Estou fazendo um popup, mas o evento onclick não está funcionando, não estou usando jQuery, apenas javascript.

 

Minhas funções:

function abrepopup()
{
    document.getElementById("popup").style.display="block";
};

function fechapopup()
{
    document.getElementById("popup").style.display="none !important";
};

function troca2() 
{ 
    document.getElementById("caixa-popup1").style.display="none"; 
    document.getElementById("caixa-popup2").style.display="block"; 
};

O código html:

<body onmouseout="abrepopup()" style="height: 1000px;">
        <div id="container" >
            <div id="popup" style="display: none;">
                
                <div id="caixa-popup1" class="caixa-popup" style="display: block;">
                    <input type="button" style="float: right; z-index: 1;" onclick="fechapopup()" value="X">
                    <h1>
                        <span class="titulo">Você quer</span><br>
                        <span>GANHAR R$10,00 DE DESCONTO</span>
                    </h1>
                        <p>em sua primeira compra?</p>
                        <input type="button" value="Sim" onclick="troca2()">
                        <input type="button" value="Não" onclick="fechapopup()">
                </div>
                
                <div id="caixa-popup2" class="caixa-popup" style="display: none;">
                    <input type="button" style="float: right; z-index: 1;" onclick="fechapopup()" value="X">
                    <h1>
                        <span class="titulo">Informe seu e-mail e</span><br>
                        <span>ESCOLHA UMA LINHA PARA GANHAR O DESCONTO</span>
                    </h1>
                        <p></p>
                        <input type="button" value="Sim" onclick="troca2()">
                        <input type="button" value="Não" onclick="fechapopup()">
                </div>
                
            </div>
        </div>
    </body>

 

As funções abrepopup() e troca2() estão funcionando perfeitamente, só o que não funciona é a função fechapopup()...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Mas essa está funcionando, eu quero que o popup abra quando o usuário for sair da página, no caso tirar o mouse.

Isso está do jeito que eu quero, só não sei porque não funciona a função fechapopup(), fazendo testes vi que o problema não é o onclick já que outra função com o click funcionou. Já editei o post.

 

^_^

Compartilhar este post


Link para o post
Compartilhar em outros sites

Percebi que ao dar dois cliques funciona. Então, remova o onmouseout da body ao entrar na função para abrir o popup:

function abrepopup(){
    document.getElementById("popup").style.display="block";
    document.getElementsByTagName("body")[0].removeAttribute("onmouseout");
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

Acredito que abaixo está o código que você precisa para funcionar. Cole o código em um arquivo teste e veja se está da forma que precisa, se estiver, basta implementar no seu:

<!DOCTYPE html>
<html>
	<head>
		<script>
			function abrepopup() {
				document.getElementById("popup").style.display="block";
				document.getElementsByTagName("body")[0].removeAttribute("onmouseout");
			};

			function fechapopup() {
				document.getElementById("popup").style.display="none";
			};

			function troca2() { 
				document.getElementById("caixa-popup1").style.display="none"; 
				document.getElementById("caixa-popup2").style.display="block"; 
			};
		</script>
	</head>
	<body onmouseout="abrepopup()" style="height: 1000px;">
        <div id="container">
            <div id="popup" style="display: none;">
                
                <div id="caixa-popup1" class="caixa-popup" style="display: block;">
                    <input type="button" style="float: right; z-index: 1;" onclick="fechapopup()" value="X">
                    <h1>
                        <span class="titulo">Você quer</span><br>
                        <span>GANHAR R$10,00 DE DESCONTO</span>
                    </h1>
                        <p>em sua primeira compra?</p>
                        <input type="button" value="Sim" onclick="troca2()">
                        <input type="button" value="Não" onclick="fechapopup()">
                </div>
                
                <div id="caixa-popup2" class="caixa-popup" style="display: none;">
                    <input type="button" style="float: right; z-index: 1;" onclick="fechapopup()" value="X">
                    <h1>
                        <span class="titulo">Informe seu e-mail e</span><br>
                        <span>ESCOLHA UMA LINHA PARA GANHAR O DESCONTO</span>
                    </h1>
                        <p></p>
                        <input type="button" value="Sim" onclick="troca2()">
                        <input type="button" value="Não" onclick="fechapopup()">
                </div>
                
            </div>
        </div>
    </body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Agora funcionou, será que era porque eu tinha colocado o script no body ao invés de colocar no header?

 

Mas... quando coloco o mesmo código na página ele ativa a função de abrir quando meche o mouse dentro da página e não fora. Algum conflito talvez?

 

Muito obrigada.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por lezão
      Boa tarde, pessoal!
      Td bem com vcs?
       
      Estou a procura de um JS que me de retorno dos dados selecionados na pagina anterior.
      Eu escolho as minhas opções e qnd eu clicar em confirmar pedido chama outra pagina com os dados q eu selecionei mais os valor total
       
      Veja o código q estou utilizando:
      <!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>Documento sem título</title> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <style type="text/css"> #iconApiWhatsapp{ position: fixed; display: flex; right: 0px; bottom: 0px; z-index: 99999; right: 0px; position: fixed; width: 100%; bottom: 0px; background: rgba(0,0,0,0.8); height: 57px; text-align: center; } #iconApiWhatsapp img{ display: flex; align-items: center; justify-content: center; font-size: 24px; width: 150px; height: 57px; opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ -webkit-transition: opacity 0.5s; /* For Safari 3.1 to 6.0 */ transition: opacity 0.5s; } #iconApiWhatsapp img:hover{ opacity: 1; filter: alpha(opacity=100); /* For IE8 and earlier */ } </style> </head> <body> <table width="100%" border="0" cellspacing="5" cellpadding="0"> <tr> <td width="92%" align="left"><b>PORTUGUESA</b><br/> Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano.<br/><hr /></td> <td width="8%" align="center" valign="top"><b>28,00</b><br/> <input type="checkbox" name="sabor" id="evento_value2" value="28.00"> <input type="hidden" name="vl_sabor" value="28.00"> </td> </tr> <tr> <td align="left"><b>A MODA DA CASA</b><br/> Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano.<br/><hr /></td> <td align="center" valign="top"><b>28,00</b><br/> <input type="checkbox" name="sabor" id="evento_value2" value="28.00"> <input type="hidden" name="vl_sabor" value="28.00"></td> </tr> </table> <br/><br/><br/> <div id="iconApiWhatsapp" class="preco"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15%" align="lef" onclick="location.href='finalizar_pedido.html'" style="cursor:pointer;"> <font size="5" color="yellow" face="aril tahoma verdana"> Confirmar Pedido</td> <td width="70%" align="center"> <font size="4" color="white" face="arial"><b><span id="resultado"></span></b> <!--Resultado da soma dos checkbox--> <!--Resultado Pegando a Variavel - Resultado checkbox --> </font> </td> <td width="15%" align="right"><a href="javascript:window.history.go(-1)"><<Voltar</a></td> </tr> </table> </div> <script type="text/javascript"> var total = 0; //Chama a função com click em qualquer checkbox $(":checkbox").click(function () { //Atribui o valor do input p/ variável 'valor' var valor = parseInt($(this).val()); //Se o checkbox for marcado ele soma se não subtrai if ($(this).is(":checked")) { total += valor; } else { total -= valor; } //Atribui o valor ao input $("#evento_value").val(total); $("#resultado").text(formatPrice(total)); }); function formatPrice(value, currency = true) { var valor = parseFloat(value); let valorFormatado = null; if(currency) { //Valor com cifrão valorFormatado = valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }); } else { //Valor sem cifrão valorFormatado = valor.toLocaleString('pt-BR', { minimumFractionDigits: 2}); } return valorFormatado; } </script> </body> </html>  
       
       
    • Por DOSDISDO
      Estou tentando alterar o evento onclick de butões gerados através do JavaScript. Por que meu código não funciona?   <p id='ai'>Click the button to make a BUTTON element with text.</p>
      <button onclick="generator()">Try it</button>
      <script>
      function generator() {
        for(var x=0; x<26; x++){
        var btn = document.createElement("BUTTON");
          btn.innerHTML=x;
          btn.onclick=function() {myFunction()};
        document.getElementById('ai').innerHTML+=btn.outerHTML;
        }
      }
      myFunction(){alert('bolas')};
    • Por Alberto Nascimento
      i("calcula").onclick = function(){ Este comando depois que eu atualizei meu servidor para PHP 7.2 não quer mais funcionar.
    • Por mamotinho
      Olá, boa noite! estou com bastante dificuldade em monta uma web com a versão do prototype e jquery.min pois eles são funções antigas e não estão compatíveis com as versões novas. gostaria de sabe se alguém conhece alguma forma nova de Utilizar onclick e ajax para abrir a página dentro da index sobre uma div ?
    • Por Airton Cruz
      Bom dia galera,
      Estou com uma situação que preciso resolver aqui na empresa. Tenho que abrir um popup a partir de botão, isso é facil, mas o botão faz parte de um formulário que precisa ser validado no momento do click do botão, ou seja, quando o usuário clicar no botão deve aparecer um POPup e validar o formulário de usuário e senha juntos.
       
      Segue o Codigo.
       
      -- criação da função do POPup
       
          <script language="javascript">
                          
                  function abrirPopup(url,w,h) {
                  var newW = w + 100;
                  var newH = h + 100;
                  var left = (screen.width-newW)/2;
                  var top = (screen.height-newH)/2;
                  var newwindow = window.open(url, 'name', 'width='+newW+',height='+newH+',left='+left+',top='+top);
                  newwindow.resizeTo(newW, newH);
                   
                  //posiciona o popup no centro da tela
                  newwindow.moveTo(left, top);
                  newwindow.focus();
                  return false;
                  }
          </script>
       
       <form name="formCliente" id="formCliente" action="http://www.google.com.br" method="post" class="clearfix" >
                          <input type="email" name="email" placeholder="E-mail:" value="" required="true"/>
                          <input type="password" name="senha" placeholder="Senha:" value="" required="true"/>
                         <button type="submit" class="bt-ok" onclick="return abrirPopup('popup2.html', 500, 270)">OK</button>
                          <div class="clear"></div>
                          <!--<div class="esqueci-minha-senha link-com-seta"><span></span><a href="/" title="Esqueci minha senha">esqueci minha senha</a></div>-->
                      </form>
       
       
      Por favor, preciso de ajuda urgente.
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.