How can I alter the background color using Jquery or CSS3?

Question

How can I alter the background color using Jquery or CSS3?

UPDATE

Update:

After following Zach Saucier's instructions, I added the specified codes:

JS

this.onclick = function() { this.style.background = "red"; this.innerHTML = "Bought"; }

So the button displays as:

<a onclick="javascript:func(this)" class="ajax_add_to_cart_button comprar_mat" rel="ajax_id_product_14" href="../cart.php?add&amp;id_product=14" id="matricularme">Matricularme</a>

Despite these changes, the button still does not work

I am attempting to add some effects on buttons within my website but am facing difficulties.

The HTML link (displayed as a button) appears like this:

<td class="marker">
    <a class="ajax_add_to_cart_button comprar_mat" rel="ajax_id_product_14" href="../cart.php?add&amp;id_product=14">Buy it now!</a>
</td>

This particular button is used to add a product on my website, and I simply want to replace the entire text with "Bought" and modify the background as well.

What approach should I take for this? Should I utilize jQuery? Or maybe implement a CSS style where one sprite image represents "Buy it now!" and "Bought", allowing me to just change the background position?

Thank you

css button

Answer 1

Answer №1

When dealing with HTML code like this

<td class="marker">
    <a onclick="purchase()" id="myid">Buy now!</a>
</td>

Implement this JavaScript function

function purchase() { 
    var element = document.getElementById("myid");
    element.style.background = "red"; 
    element.innerHTML = "Purchased"; 
}

Check out the fiddle here

For a different approach, consider the improved reusability suggested by Zach and how to handle variable strings:

<td class="marker">
    <a onclick="purchase(this)" id="myid">Buy now!</a>
</td>
<br>
<td class="marker">
    <a onclick="purchase(this)" id="myid">Purchase as gift!</a>
</td>

function purchase(element) { 
    element.style.background = "red"; 
    element.innerHTML = element.innerHTML.replace("Buy it", "Purchased"); 
}

See the demo in action

Answer 2

When dealing with HTML code like this

<td class="marker">
    <a onclick="purchase()" id="myid">Buy now!</a>
</td>

Implement this JavaScript function

function purchase() { 
    var element = document.getElementById("myid");
    element.style.background = "red"; 
    element.innerHTML = "Purchased"; 
}

Check out the fiddle here

For a different approach, consider the improved reusability suggested by Zach and how to handle variable strings:

<td class="marker">
    <a onclick="purchase(this)" id="myid">Buy now!</a>
</td>
<br>
<td class="marker">
    <a onclick="purchase(this)" id="myid">Purchase as gift!</a>
</td>

function purchase(element) { 
    element.style.background = "red"; 
    element.innerHTML = element.innerHTML.replace("Buy it", "Purchased"); 
}

See the demo in action

How can I alter the background color using Jquery or CSS3?

Answer №1

Similar questions

What is the best way to refresh an owl-carousel element?

Unable to locate a resolution for the error message "Warning: Task "uglify" not found"

The CSS :lang() selector targets elements within documents that do not specify a particular language

angular-ui-tab-scroll: Odd spacing between blocks and tabs, each separated individually

"To enhance the functionality of your website in Chrome, incorporate Bootstrap affix and

Having trouble displaying API JSON data in a Vue.js table component

What is the best way to integrate LESS css into a Reactjs application?

Having trouble with Drag & Drop on Safari iOS? It seems that it won't drag or respond to drop on desktop or iPad

Styling radio buttons with customized CSS borders

Dealing with h2 text overflowing within a bordered container

Creating an HTML5 canvas that expands to cover the entire html document

Change the css code to override the color of the background material

What is the best way to insert a triangle shape to the bottom of a div with an opacity level set at 0.2

aligning two elements within a container to have equal heights

What steps should I take to address the issue of fixing the classname rather than using the

Issue with top-level navigation menu dropdown functionality

Is it possible to utilize LESS to dynamically read the width?

Guide to animate the appearance of a div from a specific location

Tips for enhancing the transition effect of animated gifs on a webpage using JavaScript

What is the best way to format an image within an <a> element?