Modifying button text with jQuery is not feasible

I'm facing a challenge with jQuery and I need the help of experienced wizards. I have a Squarespace page here: . However, changing the innerHTML of a button using jQuery seems to be escaping my grasp.

My goal is to change the text in the "Add to cart" button from English to Dutch. The button has the following HTML structure:

<div class="sqs-add-to-cart-button-wrapper" id="yui_3_17_2_1_1487777852612_138" style="visibility: visible;">
    <div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button " data-collection-id="5890a2ff2e69cf43f9dad6c5" data-item-id="589f1443c0302664f13c7656" data-original-label="Add To Cart" id="yui_3_17_2_1_1487777852612_146">
        <div class="sqs-add-to-cart-button-inner">Add To Cart</div>
    </div>
</div>

In order to achieve this, I've used the jQuery script below. As a sanity check, I added some initial code to confirm that my jQuery implementation (with API link injection somewhere else) is functioning properly. An alert saying "Yeah" pops up, so there doesn't seem to be any issue there. Nevertheless, the button text stubbornly refuses to change :(.

<script>
    window.onload = function() {
      if (window.jQuery) {  
        // jQuery is loaded  
        alert("Yeah!");
      } else {
        // jQuery is not loaded
        alert("Doesn't Work");
      }
    }

    $(window).load(function() {
       $(".sqs-add-to-cart-button-inner").text("Voeg toe aan mandje");
    });
</script>

To all you jQuery gurus out there, I would greatly appreciate any assistance you can provide! Kr, BarrieO

javascriptjqueryhtmlsquarespace

Answer №1

Make use of the $(document).ready() function in jQuery.

$(document).ready(function() {
  $(".btn-primary").text("Click me!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-wrapper" id="example_123" style="visibility: visible;">
  <div class="custom-button custom-edit-mode editable-button " data-collection-id="abc123" data-item-id="def456" data-original-label="Submit" id="example_789">
    <div class="button-inner">Submit</div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring jQuery's ability to retrieve CSS values

Is there a way to use jQuery to read a specific CSS value from a class? The situation is as follows: HTML: <div class="box"></div> CSS: .box { margin-top: 100px; } I want to determine if the .box class has a margin-top of 100px in order t ...

jquerycssreturn-value

Issues with the visibility of inlined styles within the Angular component library

After developing a custom library with components for an Angular 4 application, I encountered an issue where the CSS styling from the components was not being applied when using them in an application. Although the functionality worked fine, the visual asp ...

javascriptangulartypescript

What is the relationship between font size adjustments and the dimensions of the surrounding parent div element?

I've come across an issue that involves having the following code snippet in the body of an HTML file: html, body { width: 99%; height: 99%; margin: 0px; overflow: hidden; } #container1 { display: flex; gap: 2%; width: 90%; heigh ...

htmlcssmargin

Creating a child element to fully span the width of its parent using floating techniques

My dilemma involves a child element nested under a floated parent. Is there a way to make the child element full-width without affecting the width of the parent? The current situation The desired outcome, but without using float The workaround suggested ...

htmlcss

The onclick function fails to function properly following an Ajax reload of the <div> element

I have an issue with my onclick function that only works the first time. Every time the onclick function triggers an ajax request, it successfully reloads a div which contains code to retrieve values from SQL and build an HTML table using a for loop. Alth ...

javascriptphphtmlajax

Is it possible to implement the same technique across various child controllers in AngularJS?

I am trying to execute a function in a specific child controller. The function has the same name across all child controllers. My question is how can I call this function from a particular controller? Parent Controller: app.controller("parentctrl",functi ...

javascriptangularjscontrollerparent

Dragging the world map in D3 causes it to appear jumpy and erratic

I'm currently working on a Vue project to create an interactive world map that allows users to drag and zoom. I've attempted to integrate D3 for this purpose, but encountered an issue where the map jumps to the bottom right of the page whenever I ...

javascriptvue.jsd3.js

What is preventing this setTimeout from triggering?

My experience with Knockout js has left me puzzled, as I seem to be missing a key concept. Despite no error messages, it's challenging for me to pinpoint where exactly the issue lies. All I want is to periodically fetch data and update my table using ...

javascriptjqueryajaxknockout.js

The Socket.io Chat application is indicating a memory leak with the EventEmitter, detecting 11 listeners that have been added. To resolve this issue

My private chat application is built using socket.io, node.js, and MySQL. However, I encountered an error when trying to use socket.on('example', function(data){...});. The error code thrown is related to a possible EventEmitter memory leak with ...

javascriptmysqlnode.jsexpresssocket.io

PHP Administrator Access

When a user logs in as an admin on my website, I want certain options to be available. My concern is ensuring the security of this admin account. Currently, after the login process is authenticated, I set $_SESSION['status'] = 'authorized&ap ...

phpjqueryhtmlauthenticationuser-accounts

Modifying pagination numbers with Reactjs: A step-by-step guide

I am currently working on Reactjs (nextjs) and I have successfully integrated the "Nextjs" framework. The pagination is working fine, but the buttons are displaying as "1,2,3,20" instead of "1,2...20" (showing all numbers without using "..."). How can I mo ...

javascriptreactjsnext.js

Methods for adding a new object to an array in Angular: Explained

How can I insert a new object in Angular? Here is the current data: data = [ { title: 'Book1' }, { title: 'Book2' }, { title: 'Book3' }, { title: 'Book4' } ] I would like to update the obje ...

javascripttypescript

Ensuring consistency of variables across multiple tabs using Vue.js

In my vuejs front-end, a menu is displayed only if the user is logged in. When I log out, the variable isLogged is updated to false, causing the menu to hide. If I have multiple tabs open with the frontend (all already logged in) and I logout from one tab ...

javascriptvue.js

The content spills out of the container

I'm currently working with a div that displays scrolling text when it overflows. I am wondering if there is a way to hide the scroll bars until the text actually overflows? Additionally, is there a method to make the overflow occur only vertically and ...

jqueryhtmlcss

When buttons contain an image instead of text, event.target.value will be undefined

I'm facing an issue with two buttons that are almost identical, except one includes an image while the other has text content. I have added onClick event handlers to both of them. Oddly, the event.target.value for the image button is coming up as und ...

javascriptnode.jsreactjs

Integrate Tailwind CSS into the bundled JavaScript file

Is there a way to integrate tailwind css into bundle js effectively? Take a look at this example involving vue 3 and tailwind 3 https://github.com/musashiM82/vue-webpack. Upon executing npm run build , it generates 3 files: app.js ABOUTPAGE.js app.6cba1 ...

javascriptcssvue.jstailwind-css

In what location can event listeners be found in npm packages?

For a while now, I've been immersed in the world of coding as I work on creating my very own IRC bot using nodejs. This project serves as an invaluable learning experience for me, and as I navigate through the process, I constantly encounter event lis ...

javascriptnode.jsnpmdom-eventsirc

Choosing multiple values in the selectize plugin from the controller: A step-by-step guide

Need help with selecting multiple options I'm utilizing the following plugin: https://github.com/selectize/selectize.js/blob/master/docs/usage.md I have an object as displayed in the image below: https://i.stack.imgur.com/sQsKe.png This is my Client ...

javascriptarraysangularjsobjectselectize.js

What is causing the table to not be displayed in this Javascript program when it is used in a

I am currently experimenting with incorporating an infinite loop before the prodNum and quantity prompts to consistently accept user input and display the output in a table. Although the program is functional when executed, it fails to showcase the table ...

javascripthtml

Encountering a 400 bad request error while trying to upload a file using a flask Ajax call

Currently, I am experimenting with Flask and jQuery to develop a file upload feature. However, the issue I am facing is that whenever I try to upload a file, I receive an error message stating "POST 400 (bad request)". Below is my form.html: <!DOCTYPE ...

jquerypythonajaxfile-uploadflask