How to combine onchange in javascript

Question

How to combine this javascript because I have problem when selecting the grade-11 and grade-12 the work did not work but only the BSCS pick by user thank you for help

document.getElementById('course').onchange = function() {


if (["BSCS", "BSIT","BSHRM","BSBM","BSTM"].indexOf(this.value) > -1) {
    document.getElementById("grade-11").setAttribute("disabled", true);
    document.getElementById("grade-12").setAttribute("disabled", true);


 } 
 else {
    document.getElementById("grade-11").removeAttribute("disabled");
    document.getElementById("grade-12").removeAttribute("disabled");
  }
}




document.getElementById('course').onchange = function() {


 if (["STEM", "TOP","GAS","HUMSS"].indexOf(this.value) > -1) {
    document.getElementById("first-year").setAttribute("disabled", true);


    document.getElementById("second-year").setAttribute("disabled", true);
    document.getElementById("third-year").setAttribute("disabled", true);
    document.getElementById("fourth-year").setAttribute("disabled", true);
  } else {



document.getElementById("first-year").removeAttribute("disabled");


    document.getElementById("second-year").removeAttribute("disabled");
    document.getElementById("third-year").removeAttribute("disabled");
    document.getElementById("fourth-year").removeAttribute("disabled");
  }
}

Right, you set document.getElementById('course').onchange to be one thing then you set it to something else, overwriting the first. You could use element.addEventListener to add multiple event listeners, or you could combine the code in the two onchange functions into one function. — James
– James, Commented Aug 9, 2017 at 18:47

Djaouad · Accepted Answer · 2017-08-09 18:57:34Z

1

This should work (based on your logic) :

document.getElementById('course').onchange = function() {

if (["BSCS", "BSIT","BSHRM","BSBM","BSTM"].indexOf(this.value) > -1) {
    document.getElementById("grade-11").setAttribute("disabled", true);
    document.getElementById("grade-12").setAttribute("disabled", true);
    document.getElementById("first-year").removeAttribute("disabled");
    document.getElementById("second-year").removeAttribute("disabled");
    document.getElementById("third-year").removeAttribute("disabled");
    document.getElementById("fourth-year").removeAttribute("disabled");

 } else if (["STEM", "TOP","GAS","HUMSS"].indexOf(this.value) > -1) {

    document.getElementById("first-year").setAttribute("disabled", true);
    document.getElementById("second-year").setAttribute("disabled", true);
    document.getElementById("third-year").setAttribute("disabled", true);
    document.getElementById("fourth-year").setAttribute("disabled", true);
    document.getElementById("grade-11").removeAttribute("disabled");
    document.getElementById("grade-12").removeAttribute("disabled");

  } else {

    document.getElementById("grade-11").removeAttribute("disabled");
    document.getElementById("grade-12").removeAttribute("disabled");
    document.getElementById("first-year").removeAttribute("disabled");
    document.getElementById("second-year").removeAttribute("disabled");
    document.getElementById("third-year").removeAttribute("disabled");
    document.getElementById("fourth-year").removeAttribute("disabled");
  }
}

edited Aug 9, 2017 at 18:57

answered Aug 9, 2017 at 18:46

Djaouad

22.8k4 gold badges37 silver badges57 bronze badges

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

4 Comments

Ameri Ichinose Over a year ago

It doesn't work they all disabled when I pick BS and TOP

Djaouad Over a year ago

If you pick TOP, only first to fourth will be disabled, and there is no BS, however, if you meant something from the first list then only the grades 11 and 12 will be disabled.

Ameri Ichinose Over a year ago

I mean if I pick any of BS, BSIT BSHRM etc.. , and when I pick gas etc.. they all will disable imgur.com/a/MNbhf

Djaouad Over a year ago

glad to help :)

Collectives™ on Stack Overflow

How to combine onchange in javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related