Click on the screen or any element to execute a function

Question

How can I reverse a function so when I click on an input it transforms the y value to -100% and when i click elsewhere on the screen or another element it reverse so the value returns to 0%.

I want to do it in js not in css

let movingName = document.querySelectorAll('.span-name');
let input = document.getElementsByTagName('input')

input[0].onclick = function() {
  movingName[0].style.transform = "translateY(-100%)";
}

.span-name {
  position: relative;
  color: black;
  bottom: 34px;
  left: 10px;
  font-size: 18px;
  padding: 2px;
  z-index: 1;
  pointer-events: none;
  display: block;
  width: fit-content;
  transition: 500ms;
}

<input type="email" name="email_config" required>
<span class="span-name">Email Configuration</span>

https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element has non jquery solutions in the mix — epascarello, Mar 05 '20 at 18:20

d_bhatnagar · Accepted Answer · 2020-03-06T07:57:25.793

Try using the body to get that click event and filter the events basis the target.

let movingName = document.querySelectorAll('.span-name');
let input = document.getElementsByTagName('input')

document.getElementsByTagName('body')[0].onclick = function(e) {
    var tagName = e.target.tagName;
    if (tagName !== 'INPUT') {
        movingName[0].style.transform = "translateY(100%)";
    }
}    

input[0].onclick = function() {
  movingName[0].style.transform = "translateY(-100%)";
}

.span-name {
  position: relative;
  color: black;
  bottom: 34px;
  left: 10px;
  font-size: 18px;
  padding: 2px;
  z-index: 1;
  pointer-events: none;
  display: block;
  width: fit-content;
  transition: 500ms;
}

<div style="height:100vh; width:100vw">
    <input type="email" name="email_config" required>
    <span class="span-name">Email Configuration</span>
</div>

Click on the screen or any element to execute a function

1 Answers1