WordPress update_user_meta onclick button with Ajax

Here is my oun answer, hope some can someone help with this.
I add a comments in code

<script>
//Now this windows.addEventListener, don't Work at All. I need some like
this, when the user came back in other session or reload the page,
The button, **still disabled** But i don't know how to make it work.
PLEASE ANY HELP? 

     window.addEventListener('load', ()=>{
       
    if(resultTraveler2>6)
    document.getElementById('btnTraPack').innerHTML = "Your Stock is Over!";
     if(resultTraveler2>6)
        document.getElementById('btnTraPack').disabled = true;
    if(resultTraveler2>6)
        document.getElementById('btnTraPack').style.pointerEvents="none";
    if(resultTraveler2>6)
        document.getElementById('btnTraPack').style.color = "#54595F";
    if(resultTraveler2>6)
        document.getElementById('btnTraPack').style.borderColor = "#54595F";
    if(resultTraveler2>6)
        document.getElementById('showResultsTra').style.visibility = "visible";
});

//From here, all work as i need, OK!
 
var clickCounterTrav = 0
function CounterTrav() {
    
  clickCounterTrav += 1;
  document.getElementById("resultTraveler1").innerHTML = clickCounterTrav;
}
var btnTraPackClick = document.querySelector(".btnTraPack");
var clicksContainer = document.querySelector(".clicksContainer");
var totalEl = document.createElement("span");
clicksContainer.appendChild(totalEl);

btnTraPackClick.addEventListener("click", function(e) {
  if (!e.target.classList.contains("clicksContainer")) {
    
    var ClickSum = document.querySelectorAll(".resultTraveler1, .resultTraveler2");
    let total = (0);
    ClickSum.forEach(item => {
      total += parseInt(item.innerText, 10)
   })
   totalEl.innerHTML = total;
    
  }

    if(totalEl.innerHTML>6)
        document.getElementById('btnTraPack').style.pointerEvents="none";
    if(totalEl.innerHTML>6)
        document.getElementById('btnTraPack').style.color = "#54595F";
    if(totalEl.innerHTML>6)
        document.getElementById('btnTraPack').style.borderColor = "#54595F";
    if(totalEl.innerHTML>6)
    document.getElementById('btnTraPack').innerHTML = "Your Stock is Over!";
  if(totalEl.innerHTML>6)
  document.getElementById('showResultsTra').style.visibility = "visible";
 
var CounterTrav_value = totalEl.innerHTML;
console.log(clickCounterTrav); // 111

jQuery.ajax({
    url: '/wp-admin/admin-ajax.php',
        
        data : {
            action : 'CounterTrav_update', 
            CounterTrav_value : CounterTrav_value,
        },
        beforeSend: function() {
               console.log('Updating Field');
        },
        success : function( response ) {
             console.log('Success');
        },
   })    
});
</script>

I Appreciate Any Help. Thanks!!!

Related Posts:

  1. How to pre-fill Google Forms URLs with logged-in WordPress user’s data
  2. Authentication with the Rest API when using an External Application
  3. How To Pull Information From A Page And Input The Data In The WordPress User Database Table
  4. Can I use complex HTML with Twitter Bootstrap’s Tooltip?
  5. How do I redirect to another webpage?
  6. Invariant Violation: Objects are not valid as a React child
  7. How to get all place details from a Place Details Request using Google Places API Web Service?
  8. How can I merge properties of two JavaScript objects dynamically?
  9. Uncaught SyntaxError: Invalid or unexpected token
  10. JavaScript TypeError: Cannot read property ‘style’ of null
  11. Invalid shorthand property initializer
  12. nodejs – error self signed certificate in certificate chain
  13. How do I loop through or enumerate a JavaScript object?
  14. Getting Unexpected Token Export
  15. How to use iMonkey in an iOS app
  16. What’s the difference between “Array()” and “[]” while declaring a JavaScript array?
  17. Mouseover & Mouseout w/ Javascript
  18. Format JavaScript date as yyyy-mm-dd
  19. Programmatically change the src of an img tag
  20. Unable to preventDefault inside passive event listener
  21. Angular JS Uncaught Error: [$injector:modulerr]
  22. Nested objects in javascript, best practices
  23. Scroll Automatically to the Bottom of the Page
  24. npm WARN … requires a peer of … but none is installed. You must install peer dependencies yourself
  25. How do I check if string contains substring?
  26. What does “export default” do in JSX?
  27. Cannot find module ‘internal/fs’ after upgrading to node 7
  28. How can I select an element by name with jQuery?
  29. OnChange event handler for radio button (INPUT type=”radio”) doesn’t work as one value
  30. InvalidValueError: not an instance of HTMLInputElement
  31. How to clear react-native cache?
  32. Execute PHP function with onclick
  33. blocked a frame of origin “null” from accessing a cross-origin frame – chrome
  34. How can I resolve the error “URL scheme must be “http” or “https” for CORS request.” for this code [duplicate]
  35. Initializing an Array with a Single Value
  36. Is it possible to stop JavaScript execution?
  37. Remove commas from the string using JavaScript
  38. How can you remove all documents from a collection with Mongoose?
  39. TypeError: ‘undefined’ is not an object
  40. Uncaught TypeError: Cannot read property ‘appendChild’ of null
  41. javascript setTimeout() not working
  42. React-Router : What is the purpose of IndexRoute?
  43. SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data
  44. Add new attribute (element) to JSON object using JavaScript
  45. D3 Appending Text to a SVG Rectangle
  46. Retrieve the position (X,Y) of an HTML element
  47. command not found: jest
  48. How to count string occurrence in string?
  49. Angular 2 Hover event
  50. getElementsByClassName not working [duplicate]
  51. Javascript: Unicode string to hex
  52. Preloading images with jQuery
  53. socket.io – ReferenceError: io is not defined
  54. What is the difference D3 datum vs. data?
  55. Javascript: getFullyear() is not a function
  56. Must use destructuring props assignment
  57. Line continuation characters in JavaScript
  58. Simulate a click on ‘a’ element using javascript/jquery
  59. How can I remove a style added with .css() function?
  60. Error: Couldn’t find preset “es2015” relative to directory “/Users/username”
  61. Using Angular 2 without TypeScript Transpiler
  62. Trigger Javascript on Gutenberg (Block Editor) Save
  63. How to intercept already localized scripts
  64. Show control conditionally in Gutenberg
  65. How do I include js without register/enqueue?
  66. Want image captions to be from img ALT tags not title tags
  67. Admin Bar menu item that executes Javascript but does not reload the page?
  68. wp_customize_support_script – do I need it?
  69. How to add a “data-” attribute to the image tag of native gallery output
  70. Customizer: When to use customize_preview_init VS customize_controls_enqueue_scripts
  71. Post to WordPress using REST API from external site
  72. Extend the wp_users table
  73. Rest API invalid nonce with Backbone Client
  74. Set current tab on a Gutenberg TabPanel component from outside that component
  75. Gutenberg block “This block appears to have been modified externally” on save
  76. Does wp_localize_script call a Javascript Function or Simply Pass PHP Parameters to It
  77. update_user_meta() does not work
  78. 404 Error Contact Form 7 on WordPress
  79. Gutenberg get core data – search
  80. Accessing theme customizer farbtastic object instances
  81. Add custom classes for blocks in editor based on custom attributes
  82. How to locate a Javascript? It is there in HTML but not in any file [closed]
  83. Trigger wp-embed via JavaScript to refresh iframe preview?
  84. Trying to turn the Edit function into a class to be able to use React lifecycle methods
  85. Users table missing from Database [closed]
  86. How to inherit custom javascript from parent to child pages?
  87. jQuery UI Tools: Scrollable: More than 1 instance possible?
  88. imporing HTML+javascript from REST API
  89. how to add a custom javascript file to our theme
  90. Why does my array sort order changes when I pass it to JS using WP_REST_Response?
  91. WordPress Guternberg Content For React Native
  92. Custom block update rendering when reused
  93. How do I add my own scripts to the add_action(‘wp_enqueue_scripts’) function?
  94. Post title and url not showing on google map marker [closed]
  95. Including js script at end of header
  96. contact form 7 javascript and wpcf7_before_send_mail action
  97. Preventing concurrent update of data
  98. Calling update_user_meta inside of another function doesn’t work
  99. Embed Kajabi into WP
  100. Google AdSense Ad not showing up in WordPress Blog [closed]