Change one button class from another button html

Question

I have two button classes that essentially are just 'off' and 'on' images. When a button is pushed, the class of the button switches. Modifying the code im using to turn single buttons on and off, I want to turn one button off when another is turned on, but my getElementByName never seems to work. Is there a better approach?

HTML Buttons:

 <input type="button" id="avgbtn" value="2015 Season Avg" class="offgo" onclick="toggleStateavg()" />
<input type="button" id="tradebtn" value="2015 Trade Deadline" class="ongo" onclick="toggleStateavg()"/>

Javascript:

var a = document.getElementById("avgbtn");
var b = document.getElementById("tradebtn");


function toggleStateavg(){
       if(a.className == "ongo") {
          a.className = "offgo";
          b.className = "ongo";
          avg = "one";
       } else {
          a.className="ongo";
          b.className = "offgo";
          avg = "two";
       }

    }

"... but my getElementByName never seems to work". Because there is no such method. There is getElementsByName. Those elements have ID attribute, use the getElementById instead. — Ram
– Ram, Commented Aug 24, 2015 at 21:39
Adding the s didnt fix it, I have tried getElementByID as well with no success — hannsta
– hannsta, Commented Aug 24, 2015 at 21:41
getElementById not getElementByID. JavaScript is case-sensitive! — Ram
– Ram, Commented Aug 24, 2015 at 21:42
^Furthermore, if execution speed is relevant, you probably should getElementByID since it's a bit quicker as it only searches for one occurrence of ID whereas you can get a list of names — Alexei Darmin
– Alexei Darmin, Commented Aug 24, 2015 at 21:42

user627283 · Accepted Answer · 2015-08-24 21:52:45Z

2

Try this :

 <input type="button" id="avgbtn" value="2015 Season Avg" class="offgo" onclick="toggleStateavg()" />
<input type="button" id="tradebtn" value="2015 Trade Deadline" class="ongo" onclick="toggleStateavg()"/>

and javascript :

function toggleStateavg(){
    var a = document.getElementById("avgbtn");
    var b = document.getElementById("tradebtn");

       if(a.className == "ongo") {
          a.className = "offgo";
          b.className = "ongo";
          avg = "one";
       } else {
          a.className="ongo";
          b.className = "offgo";
          avg = "two";
       }

    }

edited Aug 24, 2015 at 21:52

answered Aug 24, 2015 at 21:40

user627283

5636 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hannsta Over a year ago

Oh they were defined in the wrong spot? This works great thank you.

user627283 Over a year ago

Probably the javascript block was placed before the html so the element didn't exist "yet" so it was returning null as the inline javascript is executed synchronously with the loading of the page. Since it is placed in the function, it is later reevaluated once the html elements are created and the function is called.

score 0 · Accepted Answer · 2015-08-24 21:54:07Z

0

try to change,

var a = document.getElementByName("avgbtn");
var b = document.getElementByName("tradebtn");

to

var a = document.getElementById("avgbtn");
var b = document.getElementById("tradebtn");

and put these statements inside the

function toggleStateavg(){ ... }

edited Aug 24, 2015 at 21:54

answered Aug 24, 2015 at 21:44

user4628565

1 Comment

hannsta Over a year ago

This returns a TypeError "cannot read property 'className' of null"

user3099761 · Accepted Answer · 2015-08-24 21:59:08Z

0

HTML Buttons:

<input type="button" id="avgbtn" value="2015 Season Avg" class="offgo" onclick="offgoChangeongo()" />
<input type="button" id="tradebtn" value="2015 Trade Deadline" class="ongo" onclick="ongoChangeoffgo()"/>

Javascript:

function offgoChangeongo() {
    var onGo = document.getElementById("tradebtn");
    var offGo = document.getElementById("avgbtn");
    onGo.className = offGo.className;
}
function ongoChangeoffgo() {
    var offgo = document.getElementById("avgbtn");
    var ongo = document.getElementById("tradebtn");
    offgo.className = ongo.className;

answered Aug 24, 2015 at 21:59

user3099761

1391 silver badge4 bronze badges

Collectives™ on Stack Overflow

Change one button class from another button html

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related