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 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.
       
    • Por Aureo Almeida
      Não tenho domínio do uso de Ajax e estou com problema para chamar uma função PHP de um arquivo. Num arquivo chamado atualiza.php possuo uma função para atualizar tabelas de um Banco de Dados com dois insert into, chamada function atualizaPdIt().
      Eu desejo que esta função seja chamada para dentro de um arquivo chamado finaliza_compra.php através do evento onclick de um imput button, que está assim:
      <button onclick=" atualizaCompra ()" class='imput-concluir'>Finalizar</button> O Script que coloquei no Head da página é este:
      <script> function atualizaCompra () { $.ajax({ url:'atualiza.php', complete: function (atualizaPdIt) { alert(atualizaPdIt.responseText); }, error: function () { alert('Erro'); } }); return false; } </script> Porém, a função não é executada. O que está errado? Para constar, o script de atualização do arquivo atualiza.php funciona perfeitamente bem quanto deixado dentro de um bloco de código da página finalizar_compra.php, portanto, não é nele que está o problema, mas na forma como estou chamando.
×

Informação importante

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