push the current element into my array

Question

I'm trying to push the current selected radio button into my array 'pen'. The entire collection is getting pushed. The current selections should be the shape, size, metal. I want to be able to concatenate them into an image url but I keep getting the entire array. How do I just get the current input values?

<h2>Pick a shape</h2>
<label>circle</label>
<input type="radio" name="shapes" value="circle" checked>
<input type="radio" name="shapes" value="square">
<label>square</label>
<input type="radio" name="shapes" value="heart">
<label>heart</label>
<br><br>

<hr>

<h2>Pick a metal</h2>
<input type="radio" name="metals" value="silver" checked>silver
<input type="radio" name="metals" value="bronze">bronze
<br><br>

<hr>

<h2>Pick a size</h2>
<input type="radio" name="size" value="sm">sm
<input type="radio" name="size" value="md" checked>md
<input type="radio" name="size" value="lg">lg

$('input:radio').change(function () {
  var c = document.getElementById("controls"); 
  var els = document.getElementsByTagName("input");
  var pen = new Array();
  //console.log(els);

  for (var i = 0; i < els.length; i++) {    
    if (els[i].type == "radio" && els[i].checked == true) { 
      pen.push(els); // Should I add 'this'
      console.log(pen);
    }
    console.log(pen[0] + "-" + pen[1] + "-" + pen[2] + ".png");
  }
});

Answer 1

you need to add the index pen.push(els[i]); ex:

for (var i = 0; i < els.length; i++) {    
  if (els[i].type == "radio" && els[i].checked == true) { 
    pen.push(els[i]); // Should I add 'this'
    console.log(pen);
  }
}

console.log(pen[0] + "-" + pen[1] + "-" + pen[2] + ".png");