Jump to content

Javascript to change CSS class look.


DoyleChris98

Recommended Posts

I was wondering if javascript or jquery could change the look of a CSS class in a function called by a onclick().

For example I have a #first and also a .unclicked and .clicked.

And i have a input type="button" id="first" class="unclicked" onclick="function()".

 

function(){

change class from unclicked to clicked on first

then some other code

}

 

Inside the function how do i change the class from unclicked to clicked.

I know you haft to use the document.getid(first).style, but I'm not sure how to get the function to change it.

 

Link to comment
Share on other sites

jQuery has hasClass(), addClass() and removeClass() methods.

 

In plain Javascript, you need to manipulate the .className property of the element. .className contains a space-separated list of classes that are applied to the element. You have to use string manipulation methods to find, add or remove classes from it.

Link to comment
Share on other sites

I have another thread in HTML working with it at http://w3schools.invisionzone.com/index.php?showtopic=52535.

 

Looking into addClass() and removeClass() on the examples and i have a few questions.

In the example they are changing the <p> of the HTML code.

<p class="intro">This is a paragraph.</p>

The code I'm using is this.

<div><input type="button" class="RADIO" checked="checked" id="COM1TX" name="COMTX" value="COMTX1"><input type="button" class="RADIO1" id="COMRX" name="COMRX" value="COMRX"><input type="button" class="RADIO" id="COM2TX" name="COMTX" value="COMTX2"><input type="button" class="RADIO2" id="NAV1I" name="NAV1I" value="NAV1I"></div>

I have buttons that need to act like Radio buttons and Check boxes and was going to try to use javascript to change the look of them onclick(), and run a function associated with the button.

 

Instead of using <p> or <div> can you use the ID for the $("p:last").removeClass("radiounclicked").addClass("radioclicked");

 

ID COM1TX and COM2TX are radio buttons where one turns on and the other shuts off.

 

And the rest are like Check Boxes where you can turn them on and off.

 

Here is the JSFiddle for it and the Fullscreen JSFiddle.

Edited by DoyleChris98
Link to comment
Share on other sites

You have several errors in that code,

(1) you are not targeting a button ,element, but a INPUT element of TYPE button.

(2) $("testid:last") this seems to be for a ID ref, if so using last is pointless, as id references should be unique within a page, if using class reference, then i could understand, but! you would have to add prefix of period as in '.testid:last' ('#' for id)

(3) "$(document).ready(function() {...}); only works once when page is fully loaded, trying to run it within a function after page has fully loaded, means the code within it will never run, because its already passed the stage when it would be triggered.

 

There are so many ways to do this, element index ref eq(index ref here), if using proper id ref selector to target specific element id, and use to target each other.

 

example

 

https://jsfiddle.net/cvL9ofpL/4/

 

$("#buttonGrp1 input[type=button]").eq(0)

eq(0) targets first input of type button within div container with specific id ref, the index always start from 0.

 

.eq(($("#buttonGrp1 input[type=button]").length) -1).

 

red finds number (length) of specific inputs = 2, but as index start from 0, we have reduce this by one to produce the correct index value to target last specific input.

 

you can also use .gt(index) or .lt(index) to target all element greater or less than specified index. You also might want to consider using toggle() or toggleClass() as well.

Edited by dsonesuk
Link to comment
Share on other sites

well the example i put in the fiddle is just a example that i was trying to use.

Im not sure on how to code it that is why I'm here trying to learn.

I understand that things can't change till the page fully loaded.

 

In the fiddle that you posted when you click the test button it changes the clicked example button, and I would like it to change the button that you click i.e. the test button.

Next if i do use the code to change the button, can i still use the onClick() to run a function that is with the button click.

Also need it to change back to the black background green text when you click it again, like turning a button on and off.

Edited by DoyleChris98
Link to comment
Share on other sites

First its not that i want the button to just change the look i want it to run a function like add 2+2.

Example. again

 

function add(){

toggleclass() or whatever changes the class of the button to the clicked state.

var a = 2;

var b = a+a;

alert (B);

 

that is what i want to do.

 

As for javascript being inline, its the best way right now to test things. Once testing is done then i will create a separate file.

Link to comment
Share on other sites

It does not! just have to change look, it can run code or run another function to give result you require at same time.

	$(document).ready(function(){    $("#buttonGrp1 input[type='button']").click(function(){$(this).toggleClass("testclass testclass testclassclicked");        add();    });});function add(){var a = 2;var b = a+a;alert (;}
Edited by dsonesuk
Link to comment
Share on other sites

Well this is what i have this.

function changeclass(){	    $("#testid").click(function(){        $("#testid").removeClass("testclass").addClass("testclassclicked");    });var a = 2;var b = a + a;alert(;}

I can get it to do the addition and display it but sometime the button changes color and others it dosen't.

Is there a way to change it back.

Link to comment
Share on other sites

Jquery/javascript relies on a event, and on that event it will run specific code, or a trigger a specific function to run that code. It has to be applied when ALL elements it will reference have already been rendered usually after the page is fully loaded, this$(document).ready(function(){...});Is used to add all the event triggered code on page loading, it looks you are using a onclick event function to apply another click event function, why?The code i gave shows how to swap classes back and forth, your code wrongly implemented will produce unpredictable results, if it does manage to run it will swap once, but not back unless you use a if/else condition to identify current class and then use appropriate removeclass() and addclass(), which toggleClass() does automatically without extra if/else conditioning.

Link to comment
Share on other sites

No your code you gave me, when you pressed the test it change the other button. What i want is to change the button that you click.

so what im reading on the internet is that i cant call a function in javascript, (i.e.:Function changeclass()) and have it run a function and change the class.

I haft to use jquery toggleclass() outside and use it to look for a button press to change the class.

When i can use a onclick() in html and have a javascript function change it.

Link to comment
Share on other sites

No! MY FIRST CODE DID THAT!, the second uses $(this) to target itself only, it swaps from single class name, to double class name and back, it THEN Runs the add() function.And as already mentioned you first need event as in click event, to use toggleClass() as in my last example in post#9.

Edited by dsonesuk
Link to comment
Share on other sites

You need to target All inputs and change those, BUT! use .not(), to not include input that was clicked.1) click input.2) toggle class to change class of clicked input3) change class/style of all input except current element, triggered by click event using .not(), usually i would identify the index ref of current input, and use that as ref within .not().So look up finding index ref of element using .index(), and then .not().

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...