Replace button text onclick JS

Question

I'm trying to change button text on button click so that the text changes from 'Copy' to 'Copied!' as part of a custom clipboard setup. Here is the code I'm using:

HTML:

<button id="copyButton2">Copy</button>

JS:

<script>
 jQuery(".copyButton2").click(function () {
            jQuery(this).text(function(i, v){
               return v === 'Copy' ? 'Copied!' : 'Copy'
            })
        });
</script>

which doesn't appear to be working correctly.

I have also tried modifying this solution to no avail. Is there an obvious reason why this isn't working?

use `#` for id `.` for class – guradio May 11 '17 at 12:55 — guradio, May 11 '17 at 12:55

score 4 · Answer 1 · answered May 11 '17 at 11:55

4

You've set copyButton2 as the id of the element, yet you're using a class selector. You need to prefix the selector with #, not .

Also note that, depending on where you're running the jQuery code, you may also need to include a document.ready handler. Try this:

jQuery(function($) {
  $("#copyButton2").click(function() {
    $(this).text(function(i, v) {
      return v === 'Copy' ? 'Copied!' : 'Copy'
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="copyButton2">Copy</button>

answered May 11 '17 at 11:55

Rory McCrossan

331,213
40
305
339

This question must be close as a `typo`. – Mihai Alexandru-Ionut May 11 '17 at 11:57
The selector typo may not be the only issue, as I stated in the answer the lack of a document.ready handler could be a factor too – Rory McCrossan May 11 '17 at 11:58
Sorry, +1 instead :) – Mihai Alexandru-Ionut May 11 '17 at 11:59
Typo was a rookie error on my behalf :/ and document handler also required - thanks Rory! – May 11 '17 at 12:03
@JackVanstone no problem. Don't forget to accept an answer if it helped – Rory McCrossan May 11 '17 at 13:28

score 0 · Answer 2 · answered May 11 '17 at 11:59

0

Please use id selector ("#copyButton2") instead of class selector as you have used id for the close button.

answered May 11 '17 at 11:59

Ritwika Das

189
5

score 0 · Answer 3 · answered May 11 '17 at 12:00

0

Here's a javascript solution while we're at it.

<script> 
  var testDiv = document.getElementById('test');

  testDiv.onclick = function(){
    testDiv.innerHTML = "Copied!"
  };
</script>

answered May 11 '17 at 12:00

LJD

498
4
11

This isn't quite the same. The OPs original toggles the value on successive clicks. This sets it to `Copied!` only – Rory McCrossan May 11 '17 at 12:05

Replace button text onclick JS

3 Answers3