1

el código consiste en almacenar las interacciones realizadas y está dividido en cuatro archivos 3 js y un html

el mensaje de error

main.js:10 Uncaught TypeError: storage.temp.interactions.liked.content.append is not a function at like (main.js:10) at HTMLLIElement. (main.js:14)

el html

<li id="l1">like</li>
<script>
  window.onload = () => {
    var script = document.createElement('script');
    script.src = "main.js";
    script.type = "module"
    script.async = "true";
    document.body.appendChild(script);
  }
</script>

el main.js

'use strict';
import * as storage from './modules/storage.js';

storage.init();
console.log(JSON.parse(window.sessionStorage.getItem('interactions')));

//project actions
const like = (id, like) => {
  document.getElementById(like).classList.toggle('liked');//para añadir unos estilos al li
  console.log(storage.temp.interactions.liked.content.append(id));//para actualizar los datos
}

document.getElementById('l1').addEventListener('click', () => {
    like('some project','l1')
});

el archivo ./modules/storage.js

'use strict';
import {hash} from './data-structures.js';

const protointeractions = {
  opened: new hash(),
  commented: new hash(),
  liked: new hash(),
  disliked: new hash()
};

export const init = () => {
  window.sessionStorage.setItem('interactions', JSON.stringify(protointeractions));
};

export const temp = {
  interactions: JSON.parse(window.sessionStorage.getItem('interactions'))
}
export const update = (where, value) => {
  window.sessionStorage.setItem(where, JSON.stringify(value));
};

el archivo data-structures.js

'use strict';

export class hash{
  constructor () {
    this.max = null;
    this.min = null;
    this.content = [];
  }
  set push (id) {
    this.content.append(id)
  }
}

7
  • ¿Qué se supone que hace esto like('some project','l1') y dónde está definido?
    – A. Cedano
    Commented el 12 jul. 2020 a las 7:13
  • se supone que añade una clase al elemento con id 'l1' y después accede al campo interactions del localStorage por medio del módulo de storage.js, y en ese campo accede al subcampo liked, que es una estructura hash definida en data-structures.js, para añadirle el str 'some project' al array anidado en la estructura
    – jglv
    Commented el 12 jul. 2020 a las 7:21
  • Pero ¿esa función like está definida en alguna parte? No me suena que sea propia de JS.
    – A. Cedano
    Commented el 12 jul. 2020 a las 7:23
  • esta definida en el main.js
    – jglv
    Commented el 12 jul. 2020 a las 7:27
  • Quizá tienes que ponerlo así: liked('some project','l1') si se refiere al hash de storage.js
    – A. Cedano
    Commented el 12 jul. 2020 a las 7:30

1 respuesta 1

1

PROBLEMA

El problema es que estás usando un método no definido para los objetos de tipo Array. El tipo Array no posee ningún método llamado append. Por eso te da el error que obtienes.

SOLUCIÓN

La solución es simple, suponiendo que deseas añadir el valor de id a tu lista en content, podrías usar el método push() del tipo Array.

Tu código para el método like podría verse de la siguiente forma:

//project actions
const like = (id, like) => {
  document.getElementById(like).classList.toggle('liked');//para añadir unos estilos al li
  console.log(storage.temp.interactions.liked.content.push(id));//para actualizar los datos (se usa push)
}

Igualmente debes cambiar el setter llamado push de tu clase hash, ya que cometes el mismo error de intentar usar append sobre un tipo Array.

El método de tu clase deberías escribirlo así:

//...
  set push(id) {
    this.content.push(id);
  }
//...

Y lo podrías usar en tu método like de esta forma:

//project actions
const like = (id, like) => {
  document.getElementById(like).classList.toggle('liked');//para añadir unos estilos al li
  console.log(storage.temp.interactions.liked.push = id);//para actualizar los datos (se usa push)
}

Espero que esto te ayude a resolver el problema.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.