英文:
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
<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}`;
答案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 = '';
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(', ');
<!-- language: lang-html -->
<p id="films"></p>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论