Button Does not answer Javascript command

Asked

Viewed 88 times

0

I have a page that provides a coupon. Ah an image informing that it should be clicked, and when clicking it was for the same copy the text informed in the code. But after I added the pop-up, it’s not copying anymore. Does anyone know what it might be?

        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>

javascript html css button popup
  • 1

    What is the code of funcao()?

  • In the question code, there’s a }; remaining after function copiarTexto.

  • It was my mess, it worked. Thank you!

1 answer

2


You have two functions for the same button event:

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

In this code the event onclick had the function funcao() and copiarText().

Assign only one function to the event onclick or else you can assign the two functions in the onclick, in this way:

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

    Just put the two functions in a single onclick: onclick="funcao(); copiarText()"

  • 1

    Or remove the onclick="copiarText()" and call it inside the function()

  • Good personal observation, thanks for the comments adding knowledge. I already edited the reply adding your observation

  • The two functions inside the onclick did not work

  • @Morkhusz is a little inexperienced with java, to "call inside the function()" I must rename the copy?

  • @JVEUZEBIO Which of the functions didn’t work? Or the two didn’t work?

  • Ah copy the text "10KITS239"

  • In the body of your function(). For example: funcao() {&#xA; copiarTexto();&#xA;// resto da função&#xA; }

Show 3 more comments

Browser other questions tagged javascript html css button popup

You are not signed in. Login or sign up in order to post.