The edit button for an element should only modify that specific element, but instead it is making changes to all elements

Question

The edit button for an element should only modify that specific element, but instead it is making changes to all elements

Currently, I am working on creating an edit function for a favorites bar. The issue I am facing is that when I attempt to edit one box, all the previously clicked boxes are also being edited. You can find the complete code in this jsfiddle link: https://jsfiddle.net/1exrf9h8/1/

I'm puzzled as to why my editFavorite function is updating multiple boxes instead of just the selected one.

function clickEdit(input, title, url, plus, editIcon, anchorEdit, editBtn)
{
  let i = editIcon.length - 1;

  editIcon[i].addEventListener("click", function(event){
    input.style.display = "block";
    title.value = plus[i + 1].textContent;
    url.value = anchorEdit[i].href;
    console.log(i);
    console.log(anchorEdit[i]);
    editFavorite(anchorEdit[i], url, title, input, editBtn);
  });
}

function editFavorite(changed, url, title, input, editBtn)
{
  editBtn.addEventListener("click", function(){
    changed.href = url.value;
    changed.textContent = title.value;
    input.style.display = "none";
  });
}

javascript html css

Answer 1

Answer №1

It seems that there are some issues with your current approach in terms of logic, architecture, and the event handler being used. Let's try a more OOP approach to solve these problems and gain a better understanding of the process.

Each favorite will be treated as an independent object capable of creating and updating itself.

function favorite(newTitle, newUrl) {
  this.element = container.appendChild(document.createElement("div"));
  this.title = this.element.appendChild(document.createElement("h2"));
  this.url = this.element.appendChild(document.createElement("h2"));

    this.update = (newTitle, newUrl) => {
      this.title.textContent = newTitle;
      this.url.textContent = newUrl;
    }

    this.createButton = () => {
      button = this.element.appendChild(document.createElement("button"));
      button.append("Edit");
      button.addEventListener("click", () => {
        let titleInput = document.getElementById("title").value;
        let urlInput = document.getElementById("url").value;

        this.update(titleInput, urlInput);
      })
  }

  this.update(newTitle, newUrl);
  this.createButton();
}

We can then include a simple form where users can input data for editing existing favorites or creating new ones.

<input id="title" type="text" name="title" placeholder="Title">
<input id="url" type="text" name="url" placeholder="Url">
<button id="submit">Create New</button>

Next, we implement the submit functionality.

  document.getElementById("submit").addEventListener("click", () => {
    let titleInput = document.getElementById("title").value;
    let urlInput = document.getElementById("url").value;

    if (!titleInput.length || !urlInput.length) return;
    let newFavorite = new favorite(titleInput, urlInput);
    container.appendChild(newFavorite.element);
 });

https://jsfiddle.net/p50L27us/48/

Answer 2

It seems that there are some issues with your current approach in terms of logic, architecture, and the event handler being used. Let's try a more OOP approach to solve these problems and gain a better understanding of the process.

Each favorite will be treated as an independent object capable of creating and updating itself.

function favorite(newTitle, newUrl) {
  this.element = container.appendChild(document.createElement("div"));
  this.title = this.element.appendChild(document.createElement("h2"));
  this.url = this.element.appendChild(document.createElement("h2"));

    this.update = (newTitle, newUrl) => {
      this.title.textContent = newTitle;
      this.url.textContent = newUrl;
    }

    this.createButton = () => {
      button = this.element.appendChild(document.createElement("button"));
      button.append("Edit");
      button.addEventListener("click", () => {
        let titleInput = document.getElementById("title").value;
        let urlInput = document.getElementById("url").value;

        this.update(titleInput, urlInput);
      })
  }

  this.update(newTitle, newUrl);
  this.createButton();
}

We can then include a simple form where users can input data for editing existing favorites or creating new ones.

<input id="title" type="text" name="title" placeholder="Title">
<input id="url" type="text" name="url" placeholder="Url">
<button id="submit">Create New</button>

Next, we implement the submit functionality.

  document.getElementById("submit").addEventListener("click", () => {
    let titleInput = document.getElementById("title").value;
    let urlInput = document.getElementById("url").value;

    if (!titleInput.length || !urlInput.length) return;
    let newFavorite = new favorite(titleInput, urlInput);
    container.appendChild(newFavorite.element);
 });

https://jsfiddle.net/p50L27us/48/

Answer 3

Answer №2

An issue arises with the editFavorite function because each time it is called, a new listener is automatically initiated, resulting in multiple listeners being active simultaneously.

The solution lies in adding "{once : true}" as an option within the event listener, which ensures that the listener will only trigger once.

function editFavorite(changed, url, title, input, editBtn)
{
  editBtn.addEventListener("click", function(){
    changed.href = url.value;
    changed.textContent = title.value;
    input.style.display = "none";
  },{once : true});
}

Answer 4

An issue arises with the editFavorite function because each time it is called, a new listener is automatically initiated, resulting in multiple listeners being active simultaneously.

The solution lies in adding "{once : true}" as an option within the event listener, which ensures that the listener will only trigger once.

function editFavorite(changed, url, title, input, editBtn)
{
  editBtn.addEventListener("click", function(){
    changed.href = url.value;
    changed.textContent = title.value;
    input.style.display = "none";
  },{once : true});
}

The edit button for an element should only modify that specific element, but instead it is making changes to all elements

Answer №1

Answer №2

Similar questions

Customize the appearance of alert boxes in ajax requests

"The error message "Node JS, MYSQL connection.query is not a valid method" indicates

What is the process for populating dropdown options from state?

How can I trigger the execution of the script when an asp button is clicked?

What is preventing me from directly assigning properties to my data object?

What is the best way to retrieve the value of a <div> element using AngularJs?

Is it possible to retrieve a JSON response by making a jQuery.ajax request to an appengine URL?

Tips for centering Navigation image as screen size decreases

The height of Bootstrap 4 beta columns causes a conflict with the navigation bar,

Creating a "Mark as Read" function using localStorage

What is the process by which React loads and runs JSX content?

perplexed by the pair of buttons

NodeJs guide on removing multiple documents from a MongoDB collection using their _id values

Bug in timezone calculation on Internet Explorer 11

Adjusting font size in CSS for HTML websites

The JQuery loading symbol does not prevent keyboard interactions

Generating random indexes for the Answer button to render

Implementing ordering and limiting of elements in NestJS TypeORM relations

Ways to retrieve component information externally from export

Replace the element's style using a JavaScript object