Buenas noches comunidad. Estoy intentando hacer que al darle click a un botón me arroje los siguientes 20 resultados de búsqueda en la Api Marvel. El valor por defecto es ~~~offset=0 ~~~. La página brinda 20 personajes por respuesta, si uno quiere ver los siguiente 20, en la URL debe cambiar el valor offset. Por lo tanto para que funcione solo debo incrementar offset en 20 cada vez que se haga clic. Mi problema es que no logro hacer un incremento que tenga efecto fuera de la función (función sumar()). Se que es un problema de scope. He repaso la teoría de funciones... Por horas. Pero no doy con la solución. Por último en vez de declara una variable para el incremento he declaró un objeto... Pero tampoco me función. En la URL intenfo incrementa el valor de num.page.

Les dejo un fragmento del código.

1class App {
2   constructor(page) {
3       this.page = page
4   }
5}
6
7let i = 0
8const sumar = () => {
9   i += 20
10   num = new App(i)
11   return num
12}
13
14sumar()
15sumar()
16sumar()
17sumar()
18sumar()
19c(num.page)
20
21next.addEventListener('click', () => {
22   sumar()
23})
24
25const getConection = () => {
26   const ts = Date.now(),
27       hash = md5(ts + privateKey + publicKey),
28       URL = `http://gateway.marvel.com/v1/public/characters?ts=${ts}&apikey=${publicKey}&hash=${hash}&offset=${num.page}`
29       fetch(URL)
30           .then(response => response.json())
31           .then(response => {
32               response.data.results.forEach(e => {
33                   showHero(e)
34