Question

Here is some newbie code that works but will bloat as the list grows. I’m looking for an approach that will eliminate repeating the click function bit every time a new input is created.

I’m creating a div as a button with a unique name, calling some values in a unique JSON file tied to that button, then storing the values in localStorage (the click will always call the same function).

This example deals with just three but the list could grow to dozens more.

<div style="display:none;">
<input class="hiddenWebInput" id="webImportInput1" type="text" value="fooList1.txt"  />
<input class="hiddenWebInput" id="webImportInput2" type="text" value="bar.txt"  />
<input class="hiddenWebInput" id="webImportInput3" type="text" value="foo.txt"  />
</div>

<script>


$("#webImport1").click(function() {

localStorage.setItem("picked", document.getElementById("webImportInput1").value);

getList();

});


$("#webImport2").click(function() {

localStorage.setItem("picked", document.getElementById("webImportInput2").value);

getList();

});


$("#webImport3").click(function() {

localStorage.setItem("picked", document.getElementById("webImportInput3").value);

getList();

});

ThegetList() is what I use to set other localStorage values and perform other stuff.

Thanks in advance for the advice!

Answer 1

Try this:

$('div[id^="webImport"]').click(function() {
   var n = this.id.match(/\d+/g);
   localStorage.setItem("picked", $("#webImportInput"+n).val());
   getList();
})