¿Es posible llamar a una función al hacer clic en un botón, ejecutar algún código como agregar un elemento a una base de datos y también tener acceso a una variable que se creó en esa función?
Por ejemplo,
const handleAddToDb = () => { let id = 123423r //note the ID is auto generated each time this function is called addToDb() return id } <button onClick={()=> { handleAddToDb() }}>Click</button> console.log(id???) //any idea how to acheive this? <body> <button onclick=" handleAddToDb() "> Click me </button> </body> <script> // let id is a global variable let id = 10; const handleAddToDb = () => { addToDb() console.log(id) } function addToDb(){ id++; } console.log(id) //any idea how to acheive this? </script>Podría hacer que su controlador de clics devuelva la identificación (como lo está haciendo) y asignarla a una variable a la que se pueda acceder en su ámbito externo.
También puede establecer una "tienda" que sea responsable de administrar todos los datos, incluida la adición y el seguimiento de la nueva identificación. Vea el fragmento a continuación para ver un ejemplo muy básico de cómo dos botones separados pueden acceder a los mismos datos usando este enfoque.
const addButton = document.getElementById('add'); const logButton = document.getElementById('log'); class Store { lastId = 0; add() { // do whatever you need to do. // increment and return the id. return this.lastId++; } } const store = new Store(); addButton.addEventListener('click', () => { store.add(); console.log(store.lastId); }) logButton.addEventListener('click', () => { console.log(store.lastId); }) <button id="add">Add</button> <button id="log">Log Last Id</button>