Estoy usando un contador para hacer clic en los botones y funciona bien, pero me gustaría preguntar cómo puedo hacerlo más limpio y menos repetitivo y seguir haciendo la misma función.
Para dar una perspectiva, estoy usando esto para rastrear el uso de cientos de botones, por lo tanto, el código puede verse muy desordenado si sigo usando mi script actual.
¿Cómo podría hacerlo y hacer esto más simple y limpio?
function clickCounter1() { if (typeof(Storage) !== "undefined") { if (localStorage.clickcount1) { localStorage.clickcount1 = Number(localStorage.clickcount1) + 1; } else { localStorage.clickcount1 = 1; } document.getElementById("result1").innerHTML = "Btn 1: " + localStorage.clickcount1; } } function clickCounter2() { if (typeof(Storage) !== "undefined") { if (localStorage.clickcount2) { localStorage.clickcount2 = Number(localStorage.clickcount2) + 1; } else { localStorage.clickcount2 = 1; } document.getElementById("result2").innerHTML = "Btn 2: " + localStorage.clickcount2; } } function clickCounter3() { if (typeof(Storage) !== "undefined") { if (localStorage.clickcount3) { localStorage.clickcount3 = Number(localStorage.clickcount3) + 1; } else { localStorage.clickcount3 = 1; } document.getElementById("result3").innerHTML = "Btn 3: " + localStorage.clickcount3; } } <button onclick="clickCounter1()" type="button">Btn 1</button> <button onclick="clickCounter2()" type="button">Btn 2</button> <button onclick="clickCounter3()" type="button">Btn 3</button> <br> <div id="result1"></div> <div id="result2"></div> <div id="result3"></div>Las funciones importantes son solo dos:
¡Muchas gracias por adelantado!
puedes probar esto
function clickCounter(num) { if (typeof (Storage) !== "undefined") { if (localStorage.getItem(`clickcount${num}`)) { localStorage.setItem(`clickcount${num}`, Number(localStorage.getItem(`clickcount${num}`)) + 1); } else { localStorage.setItem(`clickcount${num}`, 1); } document.getElementById(`result${num}`).innerHTML = `Btn ${num}: ` + localStorage.getItem(`clickcount${num}`); } } <button onclick="clickCounter(1)" type="button">Btn 1</button> <button onclick="clickCounter(2)" type="button">Btn 2</button> <button onclick="clickCounter(3)" type="button">Btn 3</button> <br> <div id="result1"></div> <div id="result2"></div> <div id="result3"></div>Puedes hacerlo aún más corto así:
function clickCounter(num) { if (typeof (Storage) !== "undefined") { let storedItem = localStorage.getItem(`clickcount${num}`); storedItem ? localStorage.setItem(`clickcount${num}`, Number(storedItem) + 1) : localStorage.setItem(`clickcount${num}`, 1); document.getElementById(`result${num}`).innerHTML = `Btn ${num}: ${storedItem}`; } }Actualice en caso de que desee mostrar los nombres de los botones , simplemente puede hacer esto:
<button onclick="clickCounter(this, 1)" type="button" data-name="First">Btn 1</button> <button onclick="clickCounter(this, 2)" type="button" data-name="Second">Btn 2</button> <button onclick="clickCounter(this, 3)" type="button" data-name="Third">Btn 3</button> <br> <div id="result1"></div> <div id="result2"></div> <div id="result3"></div>Tu javascript debería verse así:
function clickCounter(btn, num) { if (typeof (Storage) !== "undefined") { let storedItem = localStorage.getItem(`clickcount${num}`), btnName = $(btn).attr('data-name'); storedItem ? localStorage.setItem(`clickcount${num}`, Number(storedItem) + 1) : localStorage.setItem(`clickcount${num}`, 1); document.getElementById(`result${num}`).innerHTML = `${btnName}: ${storedItem}`; } }hay varias cosas que decir sobre el código que nos muestras.
Aquí hay un ejemplo de implementación que hice y funciona:
<button type="button" id="btn1">Btn 1</button> <button type="button" id="btn2">Btn 2</button> <button type="button" id="btn3">Btn 3</button> <br> <div id="resultbtn1"></div> <div id="resultbtn2"></div> <div id="resultbtn3"></div> function handleClickCounter(id) { if (typeof(Storage) !== "undefined") { if (localStorage.getItem(id)) { localStorage.setItem(id, Number(localStorage.getItem(id)) + 1); } else { localStorage.setItem(id, 1); } document.getElementById("result"+id).textContent = "Btn " + id + ": " + localStorage.getItem(id); } } const buttons = document.querySelectorAll("button"); // change by more specific selector if needed for (const button of buttons) { console.log(button.id) button.addEventListener("click", () => handleClickCounter(button.id)); }Por supuesto, este código se puede mejorar. Buena suerte y no dude en pedir aclaraciones :)
Puede probar el siguiente enfoque para hacerlo. Mediante la creación de una sola función clickCounter() y pasándole el Id/nombre del botón. Funcionará igual.
Código de trabajo:
function clickCounter(btnId) { if (typeof(Storage) !== "undefined") { if (localStorage[btnId]) { localStorage[btnId] = Number(localStorage[btnId]) + 1; } else { localStorage[btnId] = 1; } document.getElementById("result1").textContent = "Btn 1: " + localStorage[btnId]; } } <button onclick="clickCounter('clickcount1')" type="button">Click me!</button> <button onclick="clickCounter('clickcount2')" type="button">Click me!</button> <button onclick="clickCounter('clickcount3')" type="button">Click me!</button> <br> <div id="result1"></div> <div id="result2"></div> <div id="result3"></div>