/    Sign up×
Community /Pin to ProfileBookmark

Changing styles with Javascript

Copy linkTweet thisAlerts:
Jul 21.2017

Hello.
I’m not sure what I want to do even can be done. I certainly can’y figure it out.?

Is it possible for a button click to change the styles of [I][U]some[/U][/I] of the other buttons on a page?

I can’t even begin to code something like that, so let me try to give an example. Say you have a page full of numbered buttons, all colored blue. (What happens when they are clicked is irrelevant here.) At the top are several larger buttons, labeled “[FONT=Lucida Console][B]ODD[/B][/FONT]”, “[FONT=Lucida Console][B]EVEN[/B][/FONT]”, and “[FONT=Lucida Console][B]PRIME[/B][/FONT]”. When the [FONT=Lucida Console][B]ODD[/B][/FONT] button is clicked, then all of the lower buttons with odd numbers change from blue to red, etc..

As I said, this may be impossible to achieve, in which case please tell me that so I can stop frustrating myself trying to do it.

Thank you.

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumJul 21.2017 — Yes, this can be done, look here:

https://jsfiddle.net/up66t1yb/6/

You may try to extend this demo: Does "prime" mean that the first button should be colored? Should different colors be used for odd and even?

(Might also be done by ntn-of-type but then there would be restrictions regarding the location of the buttons in the DOM.)
Copy linkTweet thisAlerts:
@rootJul 21.2017 — It helps if you provide the code you have so far, if you have none then you should at least try and then people can guide you through to your end goal. When you post any code blocks, use forum BB Code tags (see my signature for a clue)
Copy linkTweet thisAlerts:
@Michael_RudolfauthorJul 21.2017 — Yes, this can be done, look here:

https://jsfiddle.net/up66t1yb/6/

You may try to extend this demo: Does "prime" mean that the first button should be colored? Should different colors be used for odd and even?

(Might also be done by ntn-of-type but then there would be restrictions regarding the location of the buttons in the DOM.)[/QUOTE]

Thank you [I][B]Sempervivum[/B][/I]! That is exactly what I want to do. However, it works in the Fiddle, but not when I run it independently. Why would that be?
Copy linkTweet thisAlerts:
@SempervivumJul 21.2017 — Sorry, I forgot to mention: The code uses jQuery, you need to include it:
[CODE]<script src="//code.jquery.com/jquery-1.10.2.js"></script>[/CODE]
Insert this into your head section. Place the javascript after the HTML, at the bottom of you body section.
Copy linkTweet thisAlerts:
@Michael_RudolfauthorJul 21.2017 — Thanks again [B][I]Sempervivum[/I][/B], but I think I am not placing it correctly. Is this right?

[CODE]<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<style>
.lowerbtn {
background-color: blue;
}
.lowerbtn.red {
background-color: red;
}
</style>
</head>

<body>
<html>
<button class="switchbtn" value="odd">Odd</button>
<button class="switchbtn" value="even">Even</button><br>
<button class="lowerbtn" value="1">1</button>
<button class="lowerbtn" value="2">2</button>
<button class="lowerbtn" value="3">3</button>
<button class="lowerbtn" value="4">4</button>
<button class="lowerbtn" value="5">5</button>
<button class="lowerbtn" value="6">6</button>
</html>
</body>

<script>
function switchColor(callback) {
var btns = $(".lowerbtn");
btns.removeClass("red").each(function (idx, ele) {
if (callback($(this).val())) {
$(ele).addClass("red");
}
});
}
$(".switchbtn[value='odd']").on("click", function() {
switchColor((function(vl) {return vl % 2}));
});
$(".switchbtn[value='even']").on("click", function() {
switchColor((function(vl) {return !(vl % 2)}));
});
</script>[/CODE]
Copy linkTweet thisAlerts:
@SempervivumJul 21.2017 — The reason that it's not working is, that your code contains invalid characters:[ATTACH]17545[/ATTACH]

It's not the first time that I encounter this issue, don't know how these arise. Delete them and fill up with blanks again, even if there is no garbage visible in your editor.

Additionally the structure of your HTML is faulty. Change it to this:
[CODE]<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<style>
.lowerbtn {
background-color: blue;
}

.lowerbtn.red {
background-color: red;
}
</style>
</head>

<body>
<button class="switchbtn" value="odd">Odd</button>
<button class="switchbtn" value="even">Even</button>
<br>
<button class="lowerbtn" value="1">1</button>
<button class="lowerbtn" value="2">2</button>
<button class="lowerbtn" value="3">3</button>
<button class="lowerbtn" value="4">4</button>
<button class="lowerbtn" value="5">5</button>
<button class="lowerbtn" value="6">6</button>
<script>
function switchColor(callback) {
var btns = $(".lowerbtn");
btns.removeClass("red").each(function (idx, ele) {
if (callback($(this).val())) {
$(ele).addClass("red");
}
});
}
$(".switchbtn[value='odd']").on("click", function () {
switchColor((function (vl) { return vl % 2 }));
});
$(".switchbtn[value='even']").on("click", function () {
switchColor((function (vl) { return !(vl % 2) }));
});
</script>
</body>
</html>
[/CODE]

[canned-message]attachments-removed-during-migration[/canned-message]
Copy linkTweet thisAlerts:
@Michael_RudolfauthorJul 21.2017 — I GIVE UP! Sempervivum, you are wise and talented, whereas I am an idiot. Even when I copy and paste exactly what you put, and delete all the bad characters, it does not work. I think I am doomed never to use Javascript. I thank you for your time, and I will move on to another project, probably involving crayons.
Copy linkTweet thisAlerts:
@SempervivumJul 21.2017 — I GIVE UP![/QUOTE]Don't give up. It's a common situation that a code doesn't work in the beginning and one has to work, sometimes hard, to make it run. Debugging tools can make the process much easier: Make yourself familiar with the developer tools of your browser.
Copy linkTweet thisAlerts:
@TrainJul 21.2017 — Hit F12 when it is open in your browser.

Web developer has a lot of options that can help out.
Copy linkTweet thisAlerts:
@rootJul 21.2017 — Theres several reasons for posting your code here and not on an external site. Here are a couple.

  • 1. Politeness, some people don't mind but when you're busy, having to trawl around the internet to see code that could as easily be presented in the post asking for help is more helpful.

  • 2. Links eventually go stale and anyone finding the post in the future will see a question leading to a dead link, if you have posted the blocks of relevant code theres some continuity in the post and it makes sense.
    • ×

    Success!

    Help @Michael_Rudolf spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.19,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...