Programación orientada a objetos con JavaScript | Clases
Tumàs Muntané@tumasmuntane
Hola, no se si estas consultas en el curso son internas o son publicas en toda la comunidad, así que detallaré la situación.
Me encuentro en el vídeo 2.4-Herencia del Curso de POO con JavaScript, en ésta clase se esta explicando como extender las clases.
Mi problema és que cuando mediante la consola quiero aplicar el método para dibujar el objeto que hemos creado, el navegador (Chrome y/o Firefox) no me imprime nada en el HTML.
Aquí el snippet usado:
1class Shape { 2 3 constructor( width, height, color ) { 4 this.width = width 5 this.height = height 6 this.color = color 7 } 8 9 draw() { 10 return document.body.innerHTML = ` 11 <div style=" 12 width: ${this.width}px; 13 height: ${this.height}px; 14 background-color: ${this.color};"></div>` 15 } 16} 17 18let shape1 = new Shape( 40, 20, 'red' )
Cuando el profesor Beto usa ~~~forma1.dibujar~~~, la consola le retorna justo antes de dibujar en su HTML:
<div
style="
width: 400px;
height: 220px;
background: red;"
>
</div>
En cambio a mi me retorna la declaración del método tal cual la escribí:
draw() {
return document.body.innerHTML = `
<div style="
width: ${this.width}px;
height: ${this.height}px;
border-radius: ${this.radius}px;
background-color: ${this.color};"></div>`
}
Aclarar que:
En ningún momento me marca un error.
He probado de copiar tal cual el snippet del profesor.
He intentado con algún otro snippet de ejemplo encontrado en developer.mozilla.org.
Incluso he intentado algo más simple en plan ~~~write() { return document.body.innerHTML = <p>Hello world</p>}
~~~.
Pero siempre obtengo el mismo resultado.
Ah si, Chrome está actualizado a su última versión
No entiendo porque está pasando esto por lo que agradeceré cualquier ayuda.
Muchas gracias a todos :)