lundi 31 décembre 2018

How to increment a count from a created element from a button

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