Show elements on a webpage using HTML and JavaScript

Question

Show elements on a webpage using HTML and JavaScript

How can I showcase film1, film2, and film3 in my HTML code? I attempted:

peliHtml.innerHTML = `${this.Film.title};

However, I keep encountering a console error. How should I go about displaying this data in the html?

HTML

<p id="films"></p>

JAVSCRIPT


    class Film {
        title = '';
        director = '';
        genre = '';
        date = '';
        getDates(){
            return `marca: ${this.title} - director: ${this.director}, genre: ${this.genre}, date: ${this.date}`;
        };

        constructor(title, director, genre, fechaEstreno){
            this.title = title;
            this.director = director;
            this.genre = genre;
            this.date = date;
        }

    }

    let film1 = new Film('El hobbit', 'peter jackson', 'aventura', '23-02-2002');
    let film2 = new Film('El hobbit 2', 'peter jackson', 'aventura', '23-02-2010');
    let film3 = new Film('El hobbit 3', 'peter jackson', 'aventura', '23-02-2020');

    const peliHtml = document.getElementById('films');
    peliHtml.innerHTML = `${this.Film.title}`;

javascript

Answer 1

Answer №1

this specifically pertains to an instance of a Film object within the Film class. It is generally recommended not to use this outside of a class context.

If you wish to showcase all the film titles, it would be more effective to store all the Film objects in an array, utilize .map() to extract the .title attribute for each one, and then combine them with commas:

class Film {
  title = '';
  director = '';
  genre = '';
  date = '';
  getDates() {
    return `Title: ${this.title} - Director: ${this.director}, Genre: ${this.genre}, Date: ${this.date}`;
  };

  constructor(title, director, genre, date) {
    this.title = title;
    this.director = director;
    this.genre = genre;
    this.date = date;
  }
}

let film1 = new Film('The Hobbit', 'Peter Jackson', 'Adventure', '23-02-2002');
let film2 = new Film('The Hobbit 2', 'Peter Jackson', 'Adventure', '23-02-2010');
let film3 = new Film('The Hobbit 3', 'Peter Jackson', 'Adventure', '23-02-2020');
const films = [film1, film2, film3];

const filmsHtml = document.getElementById('films');
filmsHtml.innerHTML = films.map(film => film.title).join(', ');

<p id="films"></p>

Answer 2

this specifically pertains to an instance of a Film object within the Film class. It is generally recommended not to use this outside of a class context.

If you wish to showcase all the film titles, it would be more effective to store all the Film objects in an array, utilize .map() to extract the .title attribute for each one, and then combine them with commas:

class Film {
  title = '';
  director = '';
  genre = '';
  date = '';
  getDates() {
    return `Title: ${this.title} - Director: ${this.director}, Genre: ${this.genre}, Date: ${this.date}`;
  };

  constructor(title, director, genre, date) {
    this.title = title;
    this.director = director;
    this.genre = genre;
    this.date = date;
  }
}

let film1 = new Film('The Hobbit', 'Peter Jackson', 'Adventure', '23-02-2002');
let film2 = new Film('The Hobbit 2', 'Peter Jackson', 'Adventure', '23-02-2010');
let film3 = new Film('The Hobbit 3', 'Peter Jackson', 'Adventure', '23-02-2020');
const films = [film1, film2, film3];

const filmsHtml = document.getElementById('films');
filmsHtml.innerHTML = films.map(film => film.title).join(', ');

<p id="films"></p>

Show elements on a webpage using HTML and JavaScript

Answer №1

Similar questions

Opening external stylesheets in a separate window

JavaScript Deviance

Each page in NextJS has a nearly identical JavaScript bundle size

My mocks for Jest's readFile and writeFile functions are not being loaded

display saved data from ajax request

The Joomla jCE popup feature is not functioning properly when used with AJAX content

Unable to retrieve chosen rows using Angular UI Grid

Does LABJS include a feature for executing a callback function in the event of a timeout during loading?

The VLC WebPlugin puts a halt on websocket activity during playback

Retrieve the URL with a GET request and remove a specific object

Utilizing accurate server URLs (Codeigniter) for local JavaScript execution

Unable to successfully add element to array using UIKit modal in vuejs

A method for automatically collapsing one div item when another is open

My type is slipping away with Typescript and text conversion to lowercase

The hamburger icon seems to be frozen and unresponsive

Tips for setting variable values in Angular 7

Prevent tab key focus in jQuery UI autocomplete

Utilizing onClick with material-ui button - functioning flawlessly for a single interaction

The NODE.JS application becomes unresponsive when attempting to retrieve 2.5 million records from an API

Utilize pivot to manage user roles and permissions in ExpressJS application using Mongoose