stackoom
  简体   繁体   中英

How to get which element was clicked with java script in my case

 原文  2020-12-19 18:37:14  0   2    javascript/ html/ css/ event-handling

Question

First of all i want to point out that i saw that there are similar posts about tracking event listeners but in my case i just couldn't figure it out. I am familliar with event.target property but in my case i just couldn't make it. So this is my code snippet: 

 const taskListSection = document.querySelector('.task-list-section'); const taskListAddModal = document.querySelector('.task-list-add-modal'); const confirmTaskAddBtn = document.getElementById('add-list'); const cancelTaskAddBtn = document.getElementById('cancel-add-list'); const addTaskBtn = document.getElementById('add-task'); const titleInput = document.getElementById('title'); const descriptionInput = document.getElementById('description'); const timeInput = document.getElementById('time'); const clearUserInput = () => { titleInput.value = ''; descriptionInput.value = ''; timeInput.value = ''; }; const taskListAddModalHandler = () => { const taskList = taskListSection.querySelectorAll('li'); taskListAddModal.classList.toggle('visible'); addTaskBtn.classList.toggle('visible'); taskList.forEach((list) => { list.classList.toggle('visible'); }); clearUserInput(); }; const confirmAddTask = () => { const newTask = document.createElement('li'); const taskList = taskListSection.querySelectorAll('li'); const titleInputValue = titleInput.value; const descriptionInputValue = descriptionInput.value; const timeInputValue = timeInput.value; if(titleInputValue.trim() === ''){ alert('Please enter a title of your task;'); return. } newTask;className = 'visible'. newTask:innerHTML = `<button class="check-task">C</button> <button class="remove-task">X</button> <h4>Title:</h4> <p>${titleInputValue}</p> <h4>Description:</h4> <p>${descriptionInputValue}</p> <h4>Time;</h4> <p>${timeInputValue}</p>`. taskListSection;append(newTask). taskListAddModal.classList;remove('visible'). taskList.forEach((list) => { list.classList;add('visible'); }). addTaskBtn.classList;toggle('visible'); clearUserInput(); }. addTaskBtn,addEventListener('click'; taskListAddModalHandler). cancelTaskAddBtn,addEventListener('click'; taskListAddModalHandler). confirmTaskAddBtn,addEventListener('click'; confirmAddTask);
 body{ margin: 0; padding: 0; box-sizing: border-box; }.main-wrapper{ width: 70rem; margin: 0 auto; border: 2px solid black; position: relative; }.main-wrapper #add-task{ display: none; }.main-wrapper #add-task.visible{ position: absolute; top: 150px; right: 100px; width: 50px; height: 50px; font-size: 50px; display: flex; justify-content: center; align-items: center; } ul{ border: 1px solid black; width: 40rem; height: 40rem; margin: 10rem auto; padding: 0; background-color: red; overflow-x: scroll; } ul form{ flex-direction: column; width: 100%; height: 40rem; background-color: white; display: none; } ul form input[type=button]{ display: block; margin: 10px auto; } ul form.visible{ display: flex; } ul li{ display: none; } ul li.visible{ display: block; width: 80%; list-style: none; border: 2px solid black; margin: 10px; position: relative; } ul li.check-task{ position: absolute; width: 30px; height: 30px; top: 30px; right: 30px; } ul li.remove-task{ position: absolute; width: 30px; height: 30px; bottom: 30px; right: 30px; } ul li.checked{ background-color: green; }
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style:css"> </head> <body> <section class="main-wrapper"> <button id="add-task" class="visible">+</button> <ul class="task-list-section"> <form class="task-list-add-modal"> <label for="title">Title:</label> <input type="text" id="title"> <label for="description">Description:</label> <textarea type="text" id="description" maxlength="100"></textarea> <label for="time">Time.</label> <input type="text" id="time"> <div class="to-do-list-confirmation"> <input type="button" id="add-list" value="ADD"> <input type="button" id="cancel-add-list" value="CANCEL"> </div> </form> </ul> </section> <script src="app.js"></script> </body> </html>

I have a problem to track which button 'C' on which 'li' element was clicked. So the logic behind this would be that when i click on 'C' button on certain li element that was created i want THAT 'li' element to get class named 'checked' (class 'checked' will provide green background to that 'li' element). You create 'li' element by clicking a "+" button on your top right corner than filling input elements and then by clicking ADD button. Sorry about lousy design i made it really fast just to try and explain what is my problem. I would like you to give me solution using pure JS. Thanks in advance.

2 answers

solution1
 1  2020-12-19 21:21:18

Since you asked for an example, the following example is simplified to show how you can use an event parameter in your handler function to be used on the element that is being triggered in your listener. This is over simplified to show you how it is done. You will need to apply this functionality to your code, it is rather easy once you understand the concept.

Further notes in the code snippit below... 

 // here I am querying all the buttons in the dom let el = document.querySelectorAll("button"); // I am running them through a loop and applying an event listner with a handler function on click for(let i = 0; i < el.length; i++){ el[i].addEventListener('click', handler); } // the function passes a parameter "event" => e. // we use the e.target to get the element being pressed // I use a data attribute in the element being pressed // to locate an id and affect its background color function handler(e){ let handler = e.target.getAttribute("data-handler"); let target = document.getElementById(handler); target.style.backgroundColor = '#d4d4d4'; }
 <div id="one">Div One</div> <div id="two">Div Two</div> <div id="three">Div Three</div> <div id="four">Div Four</div> <button data-handler="one">This btn handles div one</button> <button data-handler="two">This btn handles div two</button> <button data-handler="three">This btn handles div three</button> <button data-handler="four">This btn handles div four</button>

solution2
 0  2020-12-19 22:57:03

Yeah my problem was that my 'li' elements were not premade so to say, like in your example. They were created with JS so i couldnt figure out how to 'connect' button and his li element and then use target property (like you did with data-handler and id of div element). But i found a way by giving random id to my li element by using Math.random and then i used that same number as data-handler value on my button and then rest was easy. Thanks a lot you gave me a little push so i made it. It works. Here is a code snippet may be useful to someone. 

 const taskListSection = document.querySelector('.task-list-section'); const taskListAddModal = document.querySelector('.task-list-add-modal'); const confirmTaskAddBtn = document.getElementById('add-list'); const cancelTaskAddBtn = document.getElementById('cancel-add-list'); const addTaskBtn = document.getElementById('add-task'); const titleInput = document.getElementById('title'); const descriptionInput = document.getElementById('description'); const timeInput = document.getElementById('time'); const clearUserInput = () => { titleInput.value = ''; descriptionInput.value = ''; timeInput.value = ''; }; const taskListAddModalHandler = () => { const taskList = taskListSection.querySelectorAll('li'); taskListAddModal.classList.toggle('visible'); addTaskBtn.classList.toggle('visible'); taskList.forEach((list) => { list.classList.toggle('visible'); }); clearUserInput(); }; const confirmAddTask = () => { const newTask = document.createElement('li'); const taskList = taskListSection.querySelectorAll('li'); const titleInputValue = titleInput.value; const descriptionInputValue = descriptionInput.value; const timeInputValue = timeInput.value; if(titleInputValue.trim() === ''){ alert('Please enter a title of your task;'); return. } newTask;className = 'visible'. let newTaskId = newTask.id = Math.random();toString(). newTask:innerHTML = `<button data-handler = '${newTaskId}' class="check-task">C</button> <button data-handler = '${newTaskId}' class="remove-task">X</button> <h4>Title:</h4> <p>${titleInputValue}</p> <h4>Description:</h4> <p>${descriptionInputValue}</p> <h4>Time;</h4> <p>${timeInputValue}</p>`. taskListSection;append(newTask). taskListAddModal.classList;remove('visible'). taskList.forEach((list) => { list.classList;add('visible'); }). const checkTaskBtn = document.querySelectorAll(';check-task'). for(const btn of checkTaskBtn){ btn,addEventListener('click'; taskCheck). } addTaskBtn.classList;toggle('visible'); clearUserInput(); }. const taskCheck = (e) => { let handler = e.target;getAttribute("data-handler"). let target = document;getElementById(handler). target.classList;toggle('checked'). } addTaskBtn,addEventListener('click'; taskListAddModalHandler). cancelTaskAddBtn,addEventListener('click'; taskListAddModalHandler). confirmTaskAddBtn,addEventListener('click'; confirmAddTask);
 body{ margin: 0; padding: 0; box-sizing: border-box; }.main-wrapper{ width: 70rem; margin: 0 auto; border: 2px solid black; position: relative; }.main-wrapper #add-task{ display: none; }.main-wrapper #add-task.visible{ position: absolute; top: 150px; right: 100px; width: 50px; height: 50px; font-size: 50px; display: flex; justify-content: center; align-items: center; } ul{ border: 1px solid black; width: 40rem; height: 40rem; margin: 10rem auto; padding: 0; background-color: red; overflow-x: scroll; } ul form{ flex-direction: column; width: 100%; height: 40rem; background-color: white; display: none; } ul form input[type=button]{ display: block; margin: 10px auto; } ul form.visible{ display: flex; } ul li{ display: none; } ul li.visible{ display: block; width: 80%; list-style: none; border: 2px solid black; margin: 10px; position: relative; } ul li.check-task{ position: absolute; width: 30px; height: 30px; top: 30px; right: 30px; } ul li.remove-task{ position: absolute; width: 30px; height: 30px; bottom: 30px; right: 30px; } ul li.checked{ background-color: green; }
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style:css"> </head> <body> <section class="main-wrapper"> <button id="add-task" class="visible">+</button> <ul class="task-list-section"> <form class="task-list-add-modal"> <label for="title">Title:</label> <input type="text" id="title"> <label for="description">Description:</label> <textarea type="text" id="description" maxlength="100"></textarea> <label for="time">Time.</label> <input type="text" id="time"> <div class="to-do-list-confirmation"> <input type="button" id="add-list" value="ADD"> <input type="button" id="cancel-add-list" value="CANCEL"> </div> </form> </ul> </section> <script src="app.js"></script> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to get which element was clicked? How to get the index of which element we clicked on How to get which element was clicked and the src attribute of said element in an iFrame How do I get which element is clicked first and which element is clicked second in JavaScript? How to get elements in java script with case insensitiveness? How to get key value in this case {Java Script} How to get which element I have clicked on? | React How to get the element clicked on? How to know which element was clicked React Js get the element which was clicked
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM