How do I detect a "Clickoutside" event in JavaScript?

user_17644775 0
Viewed 33

I am new to JavaScript. I was trying to write a code that will turn a header file into an editable list and once you click out side the inputs will be saved as the inner text of the list items while the input values will get stored in the local storage of the web site. So far I have written the code below and tried the "blur" event but it is working for only a single list input item.

console.log("This is exercise 2");

let element = document.createElement("div");
element.setAttribute("id", "mydiv");
element.innerHTML = `
    <ul style="border: 2px solid black; margin: 5px">
        <li class="listItem">I am Item 1</li>
        <li class="listItem">I am Item 2</li>
        <li class="listItem">I am Item 3</li>
        <li class="listItem">I am Item 4</li>        
    </ul>
`;


document.querySelector("h2").appendChild(element);

let parent = document.getElementById("mydiv");
parent.addEventListener("click", myfunc);

function myfunc(e)
{
    var child = document.getElementsByClassName("listItem");
    if (document.getElementsByClassName("inputItems").length==0){
    Array.from(child).forEach(function(element){
        element.innerHTML = `
            <input type="text" class="inputItems" placeholder="Edit Me" style="border: 2px solid black">
        `;
    });
    }
}
parent.addEventListener("blur", function(){
    let listitems = Array.from(document.getElementsByClassName("listItem"));
    let items = Array.from(document.getElementsByClassName("inputItems"));
    for(let i=0; i<listitems.length; i++){
        
        listitems[i].innerHTML = items[i].value;
        localStorage.setItem(`text ${i+1}`, items[i].value);
    }
},
true);

mouseevent dom-events javascript
1 Answers

You can put the event listener on the whole document and use event.target to check if the click is outside your parent element. event.target is the element that triggered an event.
Here's what I put together:

console.log("This is exercise 2");

let element = document.createElement("div");
element.setAttribute("id", "mydiv");
element.innerHTML = `
    <ul style="border: 2px solid black; margin: 5px">
        <li class="listItem">I am Item 1</li>
        <li class="listItem">I am Item 2</li>
        <li class="listItem">I am Item 3</li>
        <li class="listItem">I am Item 4</li>        
    </ul>
`;


document.querySelector("h2").appendChild(element);

let parent = document.getElementById("mydiv");
document.addEventListener("click", myfunc);

function myfunc() {
  if(!parent.contains(event.target)) {
    toList();
    return;
  }
  if(document.getElementsByClassName("inputItems").length != 0)
    return;
  var child = document.getElementsByClassName("listItem");
  Array.from(child).forEach(function (element) {
    if(element == event.target)
      toInput();
    }
  );
  
}

function toInput() {
  var child = document.getElementsByClassName("listItem");
    Array.from(child).forEach(function(element){
        element.innerHTML = `
            <input type="text" class="inputItems" placeholder="Edit Me" style="border: 2px solid black">
        `;
    });
}

function toList() {
  var child = document.getElementsByClassName("listItem");
  Array.from(child).forEach(function(element) {
    element.innerHTML = element.getElementsByClassName("inputItems")[0].value;
  });
}
<h2></h2>

user_97195050
Related