Identifying the Clicked Object in JavaScript

Question

Identifying the Clicked Object in JavaScript

I have a simple movie search feature, but now I want to improve it so that when a user clicks on a movie, only that specific movie's title property is displayed. Currently, every movie that matches the search term is being shown.

How can I identify which movie has been clicked and pass only that movie's properties, instead of all movie objects? Do I need to implement a loop for this functionality?

I have included screenshots for reference - for example, if I click on the movie "John Wick", it should only display the title for movies matching "John Wick".

function search() {
    var userInput = $("#content-container-search").val().replace(/\s+/g,"%20");
    var searchTerm = "".concat(standardURL, apiKey, 'query=', userInput);
    var request = new XMLHttpRequest();
    clear(); //runs the clear function to clear existing DOM results to make way for the new ones
    
    request.open('GET', searchTerm , true);
    request.onload = function(data) {
        var data = JSON.parse(this.response);
        
        createList(data);
    }
    
request.send();
}

function createList(data){
    var app = document.getElementById("film-results");
    
    data.results.forEach(film => {
            console.log(film.title);
            var filmInfo = film;

            var Filmcontainer = document.createElement("div");
        Filmcontainer.setAttribute("class", "row film-container");
        
        var filmContainerLeftPanel = document.createElement("div");
        filmContainerLeftPanel.setAttribute("class", "film-container-left-panel column small-3");
        
        var filmContainerRightPanel = document.createElement("div");
        filmContainerRightPanel.setAttribute("class", "film-container-right-panel column small-9");
        
        var li = document.createElement("li");
        li.setAttribute("class", "film-container-right-panel-li");
        
        var ul = document.createElement("ul");
        
        var h1 = document.createElement("h1");
        h1.setAttribute("class", "film-container-right-panel-h1");
        h1.textContent = film.title;
        
        var ahref = document.createElement("a");
//            ahref.setAttribute("class", "button");
        ahref.setAttribute("data-open", "exampleModal1");
    
        var paragraph = document.createElement("p");
        paragraph.setAttribute("class", "film-container-right-panel-p");
        
        var paragraphMaxLength = 125;
        var filmOverview = film.overview;
        var trimmedFilmOverview = filmOverview.substr(0, paragraphMaxLength);
        trimmedFilmOverview = trimmedFilmOverview.substr(0, Math.min(trimmedFilmOverview.length, trimmedFilmOverview.lastIndexOf(" ")));
        trimmedFilmOverview = trimmedFilmOverview + "...";
       
    
        paragraph.textContent = trimmedFilmOverview;
        
        var baseImgURL = "https://image.tmdb.org/t/p/w154" + film.poster_path;
           
        var filmImage = document.createElement("img");
        filmImage.src = baseImgURL;
        filmImage.setAttribute("class", "film-container-right-panel-img");
        
//            film.forEach(filmImage.src.indexOf("null"))
//             filmImage.src = "/img/imagenotavailable.png";
    
        app.appendChild(Filmcontainer);
        Filmcontainer.appendChild(filmContainerLeftPanel);
        Filmcontainer.appendChild(filmContainerRightPanel);
        
        filmContainerLeftPanel.appendChild(filmImage);
        filmContainerRightPanel.appendChild(ul)
        .appendChild(li)
        .appendChild(ahref)
        .appendChild(h1);
        li.appendChild(paragraph);   


    generateModal(filmInfo);
        })
           
}


function generateModal(filmInfo){
    
        var modal = document.getElementById("exampleModal1");
        var h1 = document.createElement("h1");
        h1.textContent = filmInfo.title;
        modal.appendChild(h1);
        
        console.log(filmInfo);

}

https://i.sstatic.net/mmyzl.png https://i.sstatic.net/u1CQY.png https://i.sstatic.net/C39PJ.png

javascript

Answer 1

Answer №1

If you're interested, you might want to check out Event.target and currentTarget.

--UPDATE--

For example:

let buttons = document.querySelectorAll('.see-details');

buttons.forEach(button => {
  button.addEventListener('click', (film) => {
    let movieId = film.target.getAttribute('data-movie-id');
    
    console.log(movieId);
  });
});

<button data-movie-id="toy-story-1" class="see-details">See movie details</button>

Answer 2

If you're interested, you might want to check out Event.target and currentTarget.

--UPDATE--

For example:

let buttons = document.querySelectorAll('.see-details');

buttons.forEach(button => {
  button.addEventListener('click', (film) => {
    let movieId = film.target.getAttribute('data-movie-id');
    
    console.log(movieId);
  });
});

<button data-movie-id="toy-story-1" class="see-details">See movie details</button>

Answer 3

Answer №2

To tackle this issue in JavaScript, utilize the event.target method.

var div = document.createElement('div');
document.body.appendChild(div);

var button = document.createElement("button");
button.innerHTML = "John Wick";
button.style.margin= "10px";
div.appendChild(button);

var button2 = document.createElement("button");
button2.innerHTML = "John Wick: chapter 2";
button2.style.margin= "10px";
div.appendChild(button2);

var button3 = document.createElement("button");
button3.innerHTML = "John Wick: chapter 3";
div.appendChild(button3);

function showName(e){
  alert("you have clicked "+e.target.innerHTML);
}

div.addEventListener('click', showName, false);

This code sets up 3 buttons that, upon clicking, will trigger the showName event. The event.target method allows us to identify which element initiated the specific event, such as a click.

Try running console.log(event.target) to retrieve detailed information on the event triggered.

Hopefully, this explanation is beneficial.

Answer 4

To tackle this issue in JavaScript, utilize the event.target method.

var div = document.createElement('div');
document.body.appendChild(div);

var button = document.createElement("button");
button.innerHTML = "John Wick";
button.style.margin= "10px";
div.appendChild(button);

var button2 = document.createElement("button");
button2.innerHTML = "John Wick: chapter 2";
button2.style.margin= "10px";
div.appendChild(button2);

var button3 = document.createElement("button");
button3.innerHTML = "John Wick: chapter 3";
div.appendChild(button3);

function showName(e){
  alert("you have clicked "+e.target.innerHTML);
}

div.addEventListener('click', showName, false);

This code sets up 3 buttons that, upon clicking, will trigger the showName event. The event.target method allows us to identify which element initiated the specific event, such as a click.

Try running console.log(event.target) to retrieve detailed information on the event triggered.

Hopefully, this explanation is beneficial.

Identifying the Clicked Object in JavaScript

Answer №1

Answer №2

Similar questions

Navigating to the next page on a dynamic component in Angular 5 by

I encountered an issue when trying to launch my React application, as the CMD displayed an npm error message stating 'npm error! missing script:start'. Can someone offer assistance with this problem?

Error: Material-UI prop type validation failed. Please specify either children, image, src, or component prop for CardMedia component. This error occurred at

Is it possible to retrieve all data stored in AsyncStorage using React Native, while excluding the

Having issues with React-router v4's this.props.history.push() not functioning as expected

Is there a way to transfer the functionality of openssl_seal from PHP to NodeJS 18?

expanding the expressjs res feature

Creating dynamic and interactive web pages can be achieved by utilizing either $_POST or $_GET with Modal,

A JavaScript code snippet to format a phone number in the pattern xx-xxxxxx

jquery to create a fading effect for individual list items

Ways to verify an NPM package for non-JavaScript code

Steps for creating a JavaScript session expiry notification:

The npm install command failed due to a lack of suitable versions for pinkie-promise

Error: Attempting to use hooks outside the scope of a function component in react-native. Hooks can only be called within the body of a

`Thoughts on Difficulty Attaching Child Elements in JavaScript with appendChild`

Using JavaScript regex to substitute white spaces and other characters

Unable to retrieve module from directive template in Angular

Dynamic Content with Angular Bootstrap Tooltip

What is the best way to convert the value of "range" to floating point numbers in JavaScript?

Exploring ways to dynamically alter templates using the link function in Angular.js