Trying to figure out how I can get a count to work, after a user has entered a movie and submit it so that the element would be created in a table. There would be a button in the created element, how can I get the that button increment a count that would also show up in created element.
class Movie {
constructor(title, year, cost) {
this.title = title;
this.year = year;
this.cost = cost;
}
}
class UI {
createMovie(movie) {
const list = document.getElementById('movie-list');
let row = document.createElement('tr');
row.innerHTML = `
<td>${movie.title}</td>
<td>${movie.year}</td>
<td>${movie.cost}</td>
<td class="count"><td>
<input type="submit" value="Watched" class="btn2"></input>
<td><a href="#" class="delete">X</a></td>
`;
list.appendChild(row);
}
getMovie() {
}
addMovieWatchCount() {
document.querySelector('.btn2').addEventListener('click', function(e) {
let count = 0
let numOfMovie = document.querySelector('.count').innerHTML = count;
numOfMovie.appendChild(count);
});
}
deleteMovie(target) {
if(target.className === 'delete') {
target.parentElement.parentElement.remove();
}
}
clearMovieFields() {
document.getElementById('movie').value = '';
document.getElementById('year').value = '';
document.getElementById('cost').value = '';
}
}
//Event Handling
document.getElementById('form').addEventListener('submit', function(e) {
const title = document.getElementById('movie').value;
const year = document.getElementById('year').value;
const cost = document.getElementById('cost').value;
const movie = new Movie(title, year, cost);
const ui = new UI();
ui.createMovie(movie);
ui.clearMovieFields();
e.preventDefault();
});
document.getElementById('movie-list').addEventListener('click', function(e) {
const ui = new UI();
ui.deleteMovie(e.target);
e.preventDefault();
});
User clicks button Watched in created 'input' element in table and it increments a created 'th' to 1 and so on.
Aucun commentaire:
Enregistrer un commentaire