We Keep Coding

How to add a class to wordpress buttons

I want to add a class to the download button of all the posts of my wordpress site, but without having to do it in each post
I have umami software running, where I track my traffic, I would like to add events every time someone presses the download button
For that event to be registered, I must add the class "umami--click--download-button" to each button.
I have already tried in many ways but nothing seems to work
the last thing i did was add the following script but it doesn't work either
<script>
$( "div" ).addClass(function( index, currentClass ) {
var addedClass;
if ( currentClass === "wp-block-button" ) {
addedClass = "umami--click--download-button";
}
return addedClass;
});
</script>
In the element inspector the button appears as follows
<div class="wp-block-button has-custom-font-size has-large-font-size">
<a class="wp-block-button__link has-white-color
has-vivid-cyan-blue-to-vivid-purple-gradient-background
has-text-color has-background wp-element-button" href="https://earnlink.click/"
style="border-radius:10px" target="_blank"
rel="noreferrer noopener">DOWNLOAD</a></div>
Thank you very much in advance to whoever answers

Here is the correct code. Try this and let me know if it works fine or not. If you see any error in console please provide the error message for debugging
<script>
(function ($) {
$('div.wp-block-button .wp-block-button__link').each(function () {
const classToAdd = 'umami--click--download-button';
const button = $(this);
if (!button.hasClass(classToAdd)) {
button.addClass(classToAdd);
}
});
})(jQuery);
</script>

you need to test the entire class list. see example below. This will add the class to the <div> tag not the <a> tag.
$("div").addClass(function(index, currentClass) {
var addedClass;
if (currentClass === "wp-block-button has-custom-font-size has-large-font-size") {
addedClass = "umami--click--download-button";
}
return addedClass;
});
.umami--click--download-button {
color: red;
}
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<div class="wp-block-button has-custom-font-size has-large-font-size">this is a test
<a class="wp-block-button__link has-white-color
has-vivid-cyan-blue-to-vivid-purple-gradient-background
has-text-color has-background wp-element-button" href="https://earnlink.click/" style="border-radius:10px" target="_blank" rel="noreferrer noopener">DOWNLOAD</a></div>
<div class="wp-block-button has-custom-font-size has-large-font-size">this is a test another test</div>
<div class="wp-block-button ">and another</div>

How to keep the active link lit when clicking on the page?

I have a set of buttons on my page, each of which calls a javascript function when clicked; when clicked, the active link color is lit, but when I click elsewhere on the page the active link color is cleared. I want it to stay lit unless I click on another button link.
Here is an example of how a link is constructed (there are 10 links):
<div class="C1"><br><button class="button_01" onclick="HideDropdown(); ShowPage(7);">FAQs</button></div>
Here's the css for the button and C1 classes:
.button_01 {
background-color: rgb(0,2,3);
border: none;
color: rgb(100,100,100);
font-family: camphorW01-Thin,calibri,arial;
text-align: left;
text-decoration: none;
font-size: 13pt;
cursor: pointer;
transition: all 150ms ease-in;
}
.button_01:hover { color: rgb(175,222,162); }
.button_01:active { color: rgb(175,222,162); }
.button_01:focus { color: rgb(175,222,162); }
.button_01:visited { color: rgb(175,222,162); }
.C1{
color:#DBDBDB;
font-family: sans-serif;
font-size: 14pt;
text-indent: 0px;
width: auto;
margin: auto;
}
I know the default behavior is for the active link color to clear when clicking elsewhere, but I should be able to use javascript or jquery to get the value of the active link and keep it the same color (unless I click on another link); I've found only two posts that come close but one is specific to list items (li), not a button class with an onclick handler (not an anchor tag) at How to get the ID of an active link. Another post at how to Keep the color of active link constant, until i press other link showed a jquery function specific to anchor tags; I modified it like this:
<script>
var items = $("button_01");
items.removeClass("active");
$(this).toggleClass("active");
});
<script>
That doesn't work and with that script in place the links do not work.
So my question is: how do I keep the active link color lit on a button that has an onclick handler to call javascript (versus a list item or an anchor tag)?
Thanks very much for any help on this.
EDIT: I solved this problem and posted the answer below.

assuming all you buttons have class="button_01"
$('.button_01').on('click', function(){
$('.button_01').removeClass('active');
$(this).addClass('active');
});
.active {
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button_01">Button 1</button>
<button class="button_01">Button 2</button>
<button class="button_01">Button 3</button>

you could use the .css() property within jquery if the active attribute is still clicking out on your site.
$('.button_class').on('click', function() {
$('.button_class').removeAttr('style');
$(this).css('backgroundColor', 'red');
});

I just made a quick fiddle with what I think is a possible solution to your problem. I've done in pureJs.
function ShowPage(e,page){
// do a function to reset colors to default
resetColors();
// call hide here, since you do it everytime you show a page
HideDropdown();
e.classList.add("active");
//do stuff here
}
function HideDropdown(){
// do stuff here
}
function resetColors(){
// do stuff here
}
.active{
color: red !important;
}
<div class="C1">
<button class="wathever" onclick="ShowPage(this,7);">A</button>
<button class="wathever" onclick="ShowPage(this,7);">B</button>
<button class="wathever" onclick="ShowPage(this,7);">C</button>
<button class="wathever" onclick="ShowPage(this,7);">D</button>
</div>

After much research and work, here's how I solved this problem.
Remember that I have 10 links, each with a unique ID number, so I loop through them 1-10 and create the ID name (e.g., btn04). In order to keep the current active link lit, I have to change the link color to the active link color when I click anywhere on the page except for another link of the same type (button_01 class). For that, I need to store the active element in a global var on each button click, so that on any subsequent click we know what the last active element was BUT the subsequent click will change the active element to the currently-clicked element. What to do? I set up another global var, LastActiveElement, which captures the most recently set active element. Now I know where the last click was -- if it was a hyperlink and the current click is not a hyperlink, I change the last clicked hyperlink color back to its active color, which has the effect of keeping it on the same color.
Add this to the body tag:
<body onload="ShowABC(1);" onclick="changeColor(event); getLastGAE(event); getFocusElement(event);">
<script>
function changeColor(event) {
for (i = 1; i < 11; i++) {
ID_Name = "btn0" + i.toString();
if (i >= 10){ID_Name = "btn" + i.toString();}
var elem = document.getElementById(ID_Name);
TargetClass = event.target.getAttribute('class');
TargetID = event.target.getAttribute('id');
var active = document.activeElement;
var equal = (LastActiveElement == ID_Name);
tfh = TargetID == "hamburger_container";
if ((equal == "true") && (TargetClass != "button_01") && (tfh == "false")){
var newColor = "rgb(175,222,162)";
elem.style.color = newColor; }
if (TargetClass == "button_01"){ elem.style.color = "rgb(100,100,100)"; }
if (TargetID == ID_Name){ elem.style.color = "rgb(175,222,162)"; }
}
}
</script>
<script>
var LastActiveElement;
function getLastGAE(event) {
LastActiveElement = GlobalActiveElement;
}
</script>
<script>
var GlobalActiveElement;
function getFocusElement(event) {
var active = document.activeElement;
TargetID = event.target.getAttribute('id');
GlobalActiveElement = TargetID;
}
</script>
With that, if I click anywhere on the page except another hyperlink of the same class, the active link color does not change.
Now I know some advise against global vars, but this is only two data elements added to the DOM so it takes up negligible space.
Of course, there may be other solutions but this is what I came up with.
Thanks to everyone who replied to this question.

javascript using hover to change color

Hey im trying to change color of "Hello" when i hover over it. So far i cant get it to work and when i look at the console i get "ReferenceError: hover is not defined" same goes for "out". How do i fix this and is this the only issue? thanks!
<html>
<head>
<title></title>
<script>
var $Osc = {
hover: function(event){
("style", "background-color:blue;")
},
out: function(event){
("style", "background-color:white;")
}
}
var $Osc = document.getElementById("change");
hover.addEventListener("mouseover", $Osc.hover, false);
out.addEventListener("mouseout", $Osc.out, false);
</script>
</head>
<body>
<div id="change"onmouseover="hover(this)" onmouseout="out(this)">
Hello
</div>
</body>
</html>

There's no place you have defined hover and out. You need to change your code this way:
var $OscElement = document.getElementById("change");
$OscElement.addEventListener("mouseover", $Osc.hover, false);
$OscElement.addEventListener("mouseout", $Osc.out, false);
You are also overwriting the $0sc as the current element, which causes a problem. Finally, either execute the whole script after the page load or put the script after the elements.
You don't need the onmouse events on the element, which can be removed.
Finally, the way you are setting the CSS is totally wrong. You need to use the event.target for the current element.
The fixed code would be:
var $Osc = {
hover: function(event) {
event.target.style.backgroundColor = "blue";
},
out: function(event) {
event.target.style.backgroundColor = "white";
}
}
var $OscElement = document.getElementById("change");
$OscElement.addEventListener("mouseover", $Osc.hover, false);
$OscElement.addEventListener("mouseout", $Osc.out, false);
<div id="change">
Hello
</div>
Ultimately, the whole thing can be easily achieved using CSS, not sure why you want JavaScript to do this:
#change {
background: white;
}
#change:hover {
background: blue;
}
<div id="change">
Hello
</div>

jQuery animation not working in anchor tags or anchor tag children

I've spent the better part of a day tracking down a problem I've been having with jQuery animation. There appear to be issues with applying jQuery.animate() to anchor elements, or to child elements inside of anchor elements, at least with regard to movement animations. I've boiled the problem down to a fairly simple example which illustrates the problem:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
var foo = {};
function TestMove(newx, newy) {
this.newx = newx;
this.newy = newy;
}
TestMove.prototype = {
movex:function () {
$("#newsec").animate({left: this.newx + "px"});
},
movey:function () {
$("#newsec").animate({top: this.newy + "px"});
}
}
function bar() {
foo[1].movex();
foo[1].movey();
}
function init() {
foo[1] = new TestMove(200,200);
}
</script>
</head>
<body onload="init()">
<a href="" style="position: relative;">
<div style="position: relative; height: 50px; width: 50px; background-color: red;" id="newsec" onclick="bar()"></div>
</a>
</body>
</html>
The animation doesn't work, regardless of whether I put the id attribute and onclick event handler call in the <a> tag or in the <div> within it. If, on the other hand,I remove the <a> element tags altogether, the animation works as expected on the <div> element.
Does anyone have any idea why this happens?
The issue is almost moot, since I can easily do with <div> elements in the working page what I could also do with <a> elements. In the working code (much more complex) I'm using event.preventDefault() on the anchor elements so that linking and other actions are driven by explicit event handlers and this can be done from a <div> just as well. I believe I can even change the pointer icon when one does a mouseover on the <div> so that it mimics a true anchor in this regard as well.

It's because the browser is going to the anchor prior to the animation being put in place. There are plugins to get around these sort of issues, or you can put together your own.
http://briangonzalez.org/arbitrary-anchor
Example of a simple implementation:
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 1100
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
window.location.hash = elementClick
});
return false;
})
})
}

how to make div click-able?

<div><span>shanghai</span><span>male</span></div>
For div like above,when mouse on,it should become cursor:pointer,and when clicked,fire a
javascript function,how to do that job?
EDIT: and how to change the background color of div when mouse is on?
EDIT AGAIN:how to make the first span's width=120px?Seems not working in firefox

Give it an ID like "something", then:
var something = document.getElementById('something');
something.style.cursor = 'pointer';
something.onclick = function() {
// do something...
};
Changing the background color (as per your updated question):
something.onmouseover = function() {
this.style.backgroundColor = 'red';
};
something.onmouseout = function() {
this.style.backgroundColor = '';
};

<div style="cursor: pointer;" onclick="theFunction()">
is the simplest thing that works.
Of course in the final solution you should separate the markup from styling (css) and behavior (javascript) - read on it on a list apart for good practices on not just solving this particular problem but in markup design in general.

The simplest of them all:
<div onclick="location.href='where.you.want.to.go'" style="cursor:pointer"></div>

I suggest to use jQuery:
$('#mydiv')
.css('cursor', 'pointer')
.click(
function(){
alert('Click event is fired');
}
)
.hover(
function(){
$(this).css('background', '#ff00ff');
},
function(){
$(this).css('background', '');
}
);

I suggest to use a CSS class called clickbox and activate it with jQuery:
$(".clickbox").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
Now the only thing you have to do is mark your div as clickable and provide a link:
<div id="logo" class="clickbox"></div>
Plus a CSS style to change the mouse cursor:
.clickbox {
cursor: pointer;
}
Easy, isn't it?

add the onclick attribute
<div onclick="myFunction( event );"><span>shanghai</span><span>male</span></div>
To get the cursor to change use css's cursor rule.
div[onclick] {
cursor: pointer;
}
The selector uses an attribute selector which does not work in some versions of IE. If you want to support those versions, add a class to your div.

As you updated your question, here's an obtrustive example:
window.onload = function()
{
var div = document.getElementById("mydiv");
div.style.cursor = 'pointer';
div.onmouseover = function()
{
div.style.background = "#ff00ff";
};
}

<div style="cursor: pointer;" onclick="theFunction()" onmouseover="this.style.background='red'" onmouseout="this.style.background=''" ><span>shanghai</span><span>male</span></div>
This will change the background color as well

If this div is a function I suggest use cursor:pointer in your style like style="cursor:pointer" and can use onclick function.
like this
<div onclick="myfunction()" style="cursor:pointer"></div>
but I suggest you use a JS framework like jquery or extjs