Button onClick event does not work but works just fine when I display the Inspect mode in Chrome

Question

The onClick event on the referesh button for the Captcha won't work when I click it, but this button works well when I open the Inspect mode in Chrome and click it, refreshing the captcha as expected. Here is my HTML code :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<div class="md-form">
  <input type="text" id="captchaText" class="form-control" name="captcha" data-validation="required" data-validation-error-msg="<s:text name='error.required'/>">
  <label for="captchaText">
        <s:text name="index.captcha" />
    </label>
  <div class="row">
    <button type="button" class="btn btn-info btn-deep-purple btn-md offset-md-1 col-md-5" onclick="document.getElementById('imageCaptcha').src='https://i.sstatic.net/SO2KY.png'">Rafraîchir  &nbsp
            <i class="fa fa-refresh" ></i>
        </button>
    <div style="padding:6px; padding-right:0px;" class="col-md-5">
      <img id="imageCaptcha" src="https://i.sstatic.net/SO2KY.png"></div>
  </div>
</div>

Here is a screenshot of my UI :

What could be the problem in my case ?

Made a snippet of your code and added a Bootstrap CDN reference to that. — Mark Schultheiss
– Mark Schultheiss, Commented Dec 12, 2022 at 13:56
Thanks @MarkSchultheiss, will also add a link to a working captcha image link from imgur if SO allows that — mounaim
– mounaim, Commented Dec 12, 2022 at 13:58
@MarkSchultheiss it's working now but under a different link, you can find it in the src attribute of the image — mounaim
– mounaim, Commented Dec 12, 2022 at 14:03
SO your original linked image URL is likely NOT pointing to an image. — Mark Schultheiss
– Mark Schultheiss, Commented Dec 12, 2022 at 14:05

mounaim · Accepted Answer · 2022-12-13 12:47:50Z

0

The issue was due to Chrome and Firefox loading the captcha from Cache in the same tab, even if response header Cache-Control was set to no-cache. The solution was to add a random string parameter to the request, this forces Chrome to reload the captcha as it will see each time a new URL for the src attribute of the image. Something like this :

function captchaReload() {
        let randomString = (Math.random() + 1).toString(36).substring(7);
        let imageSource = 'Captcha.jpg'+ '?random=' + randomString;
        document.getElementById('imageCaptcha').src=imageSource;
    }

See this SO question for more details on this browser behaviour.

answered Dec 13, 2022 at 12:47

mounaim

1,1808 gold badges33 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Button onClick event does not work but works just fine when I display the Inspect mode in Chrome

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related