Display Object in Html – Javascript 在Html中显示对象 – Javascript

huangapple go评论75阅读模式
英文:

Display Object in Html - Javascript

问题

To display film1, film2, and film3 in the HTML, you can update your JavaScript code like this:

const peliHtml = document.getElementById('films');

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');

// Create an array to store the films
const filmsArray = [film1, film2, film3];

// Loop through the films and add their information to the HTML
filmsArray.forEach(film => {
    const filmInfo = document.createElement('p');
    filmInfo.textContent = film.getDates();
    peliHtml.appendChild(filmInfo);
});

This code creates an array of Film objects and then loops through them, creating a <p> element for each film and appending it to the HTML with the film's information displayed.

英文:

How do I display film1, film2 and film3 in the HTML?
I tried

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

but I'm getting a console error. How could I display that data in the html?

HTML

&lt;p id=&quot;films&quot;&gt;&lt;/p&gt;

JAVSCRIPT

class Film {
    title = &#39;&#39;;
    director = &#39;&#39;;
    genre = &#39;&#39;;
    date = &#39;&#39;;
    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(&#39;El hobbit&#39;, &#39;peter jackson&#39;, &#39;aventura&#39;, &#39;23-02-2002&#39;);
let film2 = new Film(&#39;El hobbit 2&#39;, &#39;peter jackson&#39;, &#39;aventura&#39;, &#39;23-02-2010&#39;);
let film3 = new Film(&#39;El hobbit 3&#39;, &#39;peter jackson&#39;, &#39;aventura&#39;, &#39;23-02-2020&#39;);


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

答案1

得分: 1

this仅在Film类内部引用Film对象。作为一个一般的经验法则:不要在类外部使用this

如果您想要显示所有电影的名称,最好将所有Film对象放入一个数组中,使用.map()来获取每个对象的.title属性,然后用逗号连接每个元素:

class Film {
  title = '';
  director = '';
  genre = '';
  date = '';
  getDates() {
    return `marca: ${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('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 films = [film1, film2, film3];

const peliHtml = document.getElementById('films');
peliHtml.innerHTML = films.map(film => film.title).join(', ');
<p id="films"></p>
英文:

this only refers to a Film object within the Film class. As a general rule of thumb: don't use this outside of a class.

If you want to display all the names of the films, it'd be better to put all the Film objects in an array, use .map() to get the .title attribute for each`, then join each element with a comma:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

class Film {
  title = &#39;&#39;;
  director = &#39;&#39;;
  genre = &#39;&#39;;
  date = &#39;&#39;;
  getDates() {
    return `marca: ${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(&#39;El hobbit&#39;, &#39;peter jackson&#39;, &#39;aventura&#39;, &#39;23-02-2002&#39;);
let film2 = new Film(&#39;El hobbit 2&#39;, &#39;peter jackson&#39;, &#39;aventura&#39;, &#39;23-02-2010&#39;);
let film3 = new Film(&#39;El hobbit 3&#39;, &#39;peter jackson&#39;, &#39;aventura&#39;, &#39;23-02-2020&#39;);
const films = [film1, film2, film3];

const peliHtml = document.getElementById(&#39;films&#39;);
peliHtml.innerHTML = films.map(film =&gt; film.title).join(&#39;, &#39;);

<!-- language: lang-html -->

&lt;p id=&quot;films&quot;&gt;&lt;/p&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月13日 23:53:54
  • 转载请务必保留本文链接:https://go.coder-hub.com/76243658.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定