iterating w/ javascript over html for stackoverflow

by edh4131

HTML

<input placeholder="Enter Camera/Lens Model" class="Box" type="text" id="gearInput1"/>
<button id="0" class="buttonshowHide" ></button>
<br>
<input placeholder="Enter Camera/Lens Model" class="Box" type="text" id="gearInput2"/>
<button id="1" class="buttonshowHide" ></button>
<br>
<input placeholder="Enter Camera/Lens Model" class="Box" type="text" id="gearInput3"/>
<button id="2" class="buttonshowHide" ></button>
<br>
<input placeholder="Enter Camera/Lens Model" class="Box" type="text" id="gearInput4"/>
<button id="3" class="buttonshowHide" ></button>

<script>
gearInputs = document.getElementsByClassName('Box'),
gearButtons = document.getElementsByClassName('buttonshowHide');

function doTheStuff(){
for (i=0; i < gearInputs.length; i++){
var gearName = gearInputs[i].value,
    gearButton = document.getElementById(i);
    if(gearName && gearName != ''){
    gearButton.innerHTML = '<span class="resultsButtons">' + gearName +  '</span>'; 
    }
  }
}

var showHide = function(){
alert('should hide: ' + this.getAttribute('id'));
}

for (i=0; i < gearButtons.length; i++){
gearButtons[i].addEventListener('click', showHide, false);
}

</script>
<br>
<button onclick="doTheStuff()">Execute</button>