0

Tenho uma página, que disponibiliza um cupom. Ah uma imagem informando que deve ser clicado, e ao clicar era para o mesmo copiar o texto informado no codigo. Porém depois que adicionei o pop-up, não esta mais copiando. Alguém sabe o que pode ser?

        let copiarTexto = () => {
            //O texto que será copiado
            const texto = "10KITS239";
            //Cria um elemento input (pode ser um textarea)
            let inputTest = document.createElement("input");
            inputTest.value = texto;
            //Anexa o elemento ao body
            document.body.appendChild(inputTest);
            //seleciona todo o texto do elemento
            inputTest.select();
            //executa o comando copy
            //aqui é feito o ato de copiar para a area de trabalho com base na seleção
            document.execCommand('copy');
            //remove o elemento
            document.body.removeChild(inputTest);

}
        };
    
.banner-cupom {

    text-align: center;

}

.banner-cupom img{

  max-width: 400px;

}

.text-coupon {

    font-size: 1.3em;
    margin-top: -110px;
    color: white;
    text-align: center;
    font-weight: bold;
    margin-bottom: 50px;

}

.button, button {
       display: -webkit-inline-box;
    color: #fff;
    border: 1px solid #72dafb;
    border-radius: 10px;
    margin-bottom: 10px;
    text-align: center;
    outline: 0;
    background: #72dafb;
    font-weight: bold;
    padding-left: 2em;
    padding-right: 2em;
}

.button:hover, button:hover {
    cursor: pointer;
    color: #fff;
    background-color: #f6bc70;
    border-color: #f6bc70;
    text-decoration: none;
}


.modal-content {
    border-radius: 15px;
    width: 30px;
    height: 60px;
    position: relative;
    top: 420px;
    left: 290px;
}


.modal-body {

  background: #000;
  border-radius: 15px;
    width: 80px;
    height: 10px;
  position: relative;


}

.modal-body:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #000;
  bottom: -20px;
  left: 20%;
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="all.js"></script>
<div class="banner-cupom">
<img src="{{media url="wysiwyg/Paginas/kitbody/cupom_2.png"}}" alt="" />
<div class="text-coupon"><button onclick="funcao()" onclick="copiarTexto()" data-toggle="modal" data-target="#myModal">10KITS239</button>
</div>
</div>
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body" id="close">
          <p align="center">Copiado.</p>
        </div>
      </div>
    </div>
  </div>

3
  • 1
    Qual o código de funcao()?
    – Sam
    Commented 1/04/2019 às 13:49
  • No código da pergunta, tem um }; sobrando após a função copiarTexto.
    – Sam
    Commented 1/04/2019 às 13:50
  • Foi confusão minha, deu certo. Obrigado!
    – JVEUZEBIO
    Commented 1/04/2019 às 13:56

1 Resposta 1

2

Você tem duas funções para o mesmo evento do botão:

<div class="text-coupon"><button onclick="funcao()" onclick="copiarTexto()" data-toggle="modal" data-target="#myModal">10KITS239</button>

Neste seu código o evento onclick possuiu a função funcao() e copiarText().

Atribua apenas uma função para o evento onclick ou então você pode atribuir as duas funções no onclick, desta forma:

<div class="text-coupon"><button onclick="funcao();copiarTexto()" data-toggle="modal" data-target="#myModal">10KITS239</button>
8
  • 2
    É só colocar as duas funções em um único onclick: onclick="funcao(); copiarText()"
    – Sam
    Commented 1/04/2019 às 13:11
  • 1
    Ou então remover o onclick="copiarText()" e chamar ela dentro da funcao()
    – Morkhusz
    Commented 1/04/2019 às 13:13
  • Boa observação pessoal, obrigado pelos comentários agregando conhecimento. Já editei a resposta adicionando a observação de vocês Commented 1/04/2019 às 13:14
  • As duas funções dentro do onclick não funcionou
    – JVEUZEBIO
    Commented 1/04/2019 às 13:23
  • @Morkhusz sou meio inexperiente com java, para "chamar dentro da funcao()" eu devo renomear o copiarText?
    – JVEUZEBIO
    Commented 1/04/2019 às 13:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .