JSFiddle - React, Tailwind, and code Playground

by Steven Lambert

HTML

0 <input id='gearInput0'>
1 <input id='gearInput1'>
2 <input id='gearInput2'>

0 <div id='0'>

</div>
1 <div id='1'>

</div>
2 <div id='2'>

</div>

<button>
Run
</button>

JavaScript

var gearNames = [];

function getGearName () {
var searchBoxes = document.querySelectorAll('input').length
console.log('searchBoxes:', searchBoxes);

for (i=0; i<searchBoxes; ++i) {
console.log('\n\ni:', i);
console.log('document.getElementById("gearInput" + i):', document.getElementById("gearInput" + i));

var spanHTML = [];

var gearName=document.getElementById("gearInput" + i).value;
//console.log("this is the gearName in searchField" + " " + i + " " + gearName);
//equipment = gearName

console.log('gearName:', gearName);
gearNames.push(gearName);


spanHTML.push('<span class="resultsButtons">' + gearNames[i] + '</span>');

console.log('spanHTML:', spanHTML);

console.log("get gear name has run " + i + " times and spanhtml is " + spanHTML);

document.getElementById(i).innerHTML = spanHTML.join("");

}
}

document.querySelector('button').addEventListener('click', getGearName)