CODEWITHSUNDEEP
javascriptjquery
Alexander Hein
Alexander Hein

Reputation: 990

How to simplify this JS function

Is it possible to combine these two functions to one?

I have tried to use multiple selectors in one function but got no working results.

I'm not familiar with vanilla JS. Thank you in advance!

document.addEventListener('DOMContentLoaded', function() {

   var radioButtons = document.getElementsByName('viewangle');
   var paragraph = document.querySelector('#closedview');

    for(var i=0;i< radioButtons.length;i++)
    {
        var elem = radioButtons[i];
        elem.addEventListener('change',function(e){
            console.log(paragraph);
            if(paragraph.className)
                paragraph.className = this.value;
            else
                paragraph.classList.add(this.value);
        }
        ,false);

    }
});

document.addEventListener('DOMContentLoaded', function() {

   var radioButtons = document.getElementsByName('viewangle');
   var paragraph = document.querySelector('#openedview');

    for(var i=0;i< radioButtons.length;i++)
    {
        var elem = radioButtons[i];
        elem.addEventListener('change',function(e){
            console.log(paragraph);
            if(paragraph.className)
                paragraph.className = this.value;
            else
                paragraph.classList.add(this.value);
        }
        ,false);

    }
});

Upvotes: 1

Views: 67

Answers (2)

wintvelt
wintvelt

Reputation: 14101

Put the plain stuff in one function, and pass differences as parameter, like so:

document.addEventListener('DOMContentLoaded', function() {
  myFunction('#closedview');
});

document.addEventListener('DOMContentLoaded', function() {
  myFunction('#openedview');
});

function myFunction(viewId) {
  var radioButtons = document.getElementsByName('viewangle');
  var paragraph = document.querySelector(viewId);

  for(var i=0;i< radioButtons.length;i++) {
    var elem = radioButtons[i];
    elem.addEventListener('change',function(e){
      console.log(paragraph);
      if(paragraph.className) {
        paragraph.className = this.value;
      } else {
          paragraph.classList.add(this.value);
      }
    });
  }
}

Or combine with @RobG's answer: pass the result of document.querySelector() to myFunction().

PS: @Federico's answer is actually cleaner and better: you only need to add only 1 eventlistener.. to DOMContentLoaded

Upvotes: 0

Federico
Federico

Reputation: 1251

Try calling the two paragraph 1 (closedview) and 2 (openedview):

document.addEventListener('DOMContentLoaded', function() {
    var radioButtons = document.getElementsByName("viewangle");
    var paragraph1 = document.getElementById("closedview");
    var paragraph2 = document.getElementById("openedview");
    for(var i=0;i< radioButtons.length;i++){
        var elem = radioButtons[i];
        elem.addEventListener('change',function(e){
            console.log(paragraph1);
            console.log(paragraph2);
            if(paragraph1.className){ paragraph1.className = this.value; }else{ paragraph1.classList.add(this.value); }
            if(paragraph2.className){ paragraph2.className = this.value; }else{ paragraph2.classList.add(this.value); }
        }
        ,false);
    }
});

Upvotes: 1

Related Questions