How do I add the values of checked radio buttons to a seperate element

Question

How do I add the values of checked radio buttons to a seperate div without overwriting the existing classes?

I' running into troubles since I like to load the values of the checked radio buttons on page load, as well I like to update the classes correctly. My function overwrite the existing class instead of adding a second.

document.addEventListener('DOMContentLoaded', function() {
   
   var radioButtons = document.getElementsByName('color');
   var paragraph = document.querySelector('.folder');
  
    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() {
size
   var radioButtons = document.getElementsByName('size');
   var paragraph = document.querySelector('.folder');

    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('bordercolor');
   var paragraph = document.querySelector('.folder');

    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);
        
    }
});

.folder {
    width:100px;
    height: 60px;
    border: 5px solid;
    background: #111;
    transition: all 0.3s;
}




.radio-toolbar {
    display:block;
	float: left;
    padding: 20px;
    width: 33%;
    box-sizing: border-box;
}


.radio-toolbar input[type="radio"] {
    display:none;
}

.radio-toolbar label {
    display:block;
	width: 100%;
	float: left;
    background-color:#ddd;
    padding:4px 11px;
    font-size:16px;
	margin-bottom: 5px;
	cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked + label {
    background-color:#bbb;
}

.black {
    background-color:#000;
}

.white {
    background-color:#fff;
}

.green {
    background-color:#00CC00;
}


.size100 {
    width: 100px;
}

.size200 {
    width: 200px;
}

.size300 {
    width: 300px;
}


.borderYellow {
    border-color: #FFFF33;
}


.borderBlue {
    border-color: #3333FF;
}


.borderOrange {
    border-color: #FF9933;
}

.size200 {
    width: 200px;
}

.size300 {
    width: 300px;
}

<div class="folder">
</div> 





<div class="radio-toolbar">
   
    <input type="radio" id="radio1" name="color" value="black" checked>
    <label for="radio1">black</label>

    <input type="radio" id="radio2" name="color" value="white">
    <label for="radio2">white</label>

    <input type="radio" id="radio3" name="color" value="green">
    <label for="radio3">green</label> 

</div>


 <div class="radio-toolbar">
   
    <input type="radio" id="radio4" name="size" value="size100" checked>
    <label for="radio4">size 10</label>

    <input type="radio" id="radio5" name="size" value="size200">
    <label for="radio5">size 20</label>

    <input type="radio" id="radio6" name="size" value="size300">
    <label for="radio6">size 30</label> 

</div>


 <div class="radio-toolbar">
   
    <input type="radio" id="radio7" name="bordercolor" value="borderYellow" checked>
    <label for="radio7">border yellow</label>

    <input type="radio" id="radio8" name="bordercolor" value="borderBlue">
    <label for="radio8">border blue</label>

    <input type="radio" id="radio9" name="bordercolor" value="borderOrange">
    <label for="radio9">border orange</label> 
   
</div>

Answer 1

You can clean up you code a little to remove code duplication. Then you need to check exisiting classes on paragraph element in order to remove classes from the same group.

I came up with this:

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

    var radios = {
        color: [].slice.call(document.getElementsByName('color')),
        bordercolor: [].slice.call(document.getElementsByName('bordercolor')),
        size: [].slice.call(document.getElementsByName('size'))
    };
    var radioButtons = [].concat.call([], radios.color, radios.size, radios.bordercolor);
    var paragraph = document.querySelector('.folder');

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

    function unsetGroup(name) {
        radios[name].forEach(function(el) {
            paragraph.classList.remove(el.value);
        });
    }
});

Demo: http://jsfiddle.net/c8f330ut/

Answer 2

When any radio button is pressed, set the "paragraph" to its default class (folder), then loop through all radio buttons, adding the appropriate class for those that are checked:

document.addEventListener('DOMContentLoaded', function() {
  var radioButtons = document.querySelectorAll('input[type="radio"]');

  for(var i = 0; i < radioButtons.length; i++) {
    radioButtons[i].addEventListener('change', update, false);
  }

  function update() {
    var paragraph = document.querySelector('.folder');
    paragraph.className = 'folder';
    for(var i = 0; i < radioButtons.length; i++) {
      if (radioButtons[i].checked) {
        paragraph.classList.add(radioButtons[i].value);
      }
    }
  }

  update();
});

document.addEventListener('DOMContentLoaded', function() {
  var radioButtons = document.querySelectorAll('input[type="radio"]');
  
  for(var i = 0; i < radioButtons.length; i++) {
    radioButtons[i].addEventListener('change', update, false);
  }

  function update() {
    var paragraph = document.querySelector('.folder');
    paragraph.className = 'folder';
    for(var i = 0; i < radioButtons.length; i++) {
      if (radioButtons[i].checked) {
        paragraph.classList.add(radioButtons[i].value);
      }
    }
  }

  update();
});

.folder {
  width: 100px;
  height: 60px;
  border: 5px solid;
  background: #111;
  transition: all 0.3s;
}
.radio-toolbar {
  display: block;
  float: left;
  padding: 20px;
  width: 33%;
  box-sizing: border-box;
}
.radio-toolbar input[type="radio"] {
  display: none;
}
.radio-toolbar label {
  display: block;
  width: 100%;
  float: left;
  background-color: #ddd;
  padding: 4px 11px;
  font-size: 16px;
  margin-bottom: 5px;
  cursor: pointer;
}
.radio-toolbar input[type="radio"]:checked + label {
  background-color: lightgreen;
}
.black {
  background-color: #000;
}
.white {
  background-color: #fff;
}
.green {
  background-color: #00CC00;
}
.size100 {
  width: 100px;
}
.size200 {
  width: 200px;
}
.size300 {
  width: 300px;
}
.borderYellow {
  border-color: #FFFF33;
}
.borderBlue {
  border-color: #3333FF;
}
.borderOrange {
  border-color: #FF9933;
}
.size200 {
  width: 200px;
}
.size300 {
  width: 300px;
}

<div class="folder"></div>

<div class="radio-toolbar">
  <input type="radio" id="radio1" name="color" value="black" checked>
  <label for="radio1">black</label>

  <input type="radio" id="radio2" name="color" value="white">
  <label for="radio2">white</label>

  <input type="radio" id="radio3" name="color" value="green">
  <label for="radio3">green</label>
</div>


<div class="radio-toolbar">
  <input type="radio" id="radio4" name="size" value="size100" checked>
  <label for="radio4">size 10</label>

  <input type="radio" id="radio5" name="size" value="size200">
  <label for="radio5">size 20</label>

  <input type="radio" id="radio6" name="size" value="size300">
  <label for="radio6">size 30</label>
</div>


<div class="radio-toolbar">
  <input type="radio" id="radio7" name="bordercolor" value="borderYellow" checked>
  <label for="radio7">border yellow</label>

  <input type="radio" id="radio8" name="bordercolor" value="borderBlue">
  <label for="radio8">border blue</label>

  <input type="radio" id="radio9" name="bordercolor" value="borderOrange">
  <label for="radio9">border orange</label>
</div>