I need to make when i click in the body the li function returns i did logo id just for test
let li = document.getElementById("li");
let ul = document.getElementById("ul");
let img = document.getElementById("img");
let logo = document.getElementById("logo");
var cancelled;
// I want clicking on the body to stop this function
let i = li.onclick = setInterval(function() {
ul.style.transition = ".5s";
ul.style.visibility = "visible";
li.style.color = "var(--Almost-Black)";
img.style.transition = ".5s";
img.style.transform = "rotate(180deg)";
ul.style.top = "30px";
}, 1000)
logo.onclick = function() {
clearInterval(i)
}<div class="header">
<div class="container">
<nav>
<div class="logo" id="logo">
<img src="images/logo.svg" alt="">
</div>
<ul>
<li class="li" id="li"><a href="#">Features</a> <img src="images/icon-arrow-down.svg" id="img">
<ul class="ul" id="ul">
<li><img src="images/icon-todo.svg" alt=""> To do list</li>
<li><img src="images/icon-calendar.svg" alt=""> calendar</li>
<li><img src="images/icon-reminders.svg" alt=""> Reminders</li>
<li><img src="images/icon-planning.svg" alt=""> planning</li>
</ul>
</li>
<li class="li"><a href="#">Company</a></li>
<li class="li"><a href="#">Careers</a></li>
<li class="li"><a href="#">About</a></li>
</ul>
<div class="btns">
<button class="login"><a href="#">login</a></button>
<button class="reg"><a href="#">Register</a></button>
</div>
</nav>
</div>
</div>The value of li.onclick must be a function. You should assign the interval to i inside the function, not when assigning onclick. You should also clear the old interval first, in case it's clicked twice.
If you want to click on the body instead of the logo to cancel, use document.body.onclick. You also need to call event.stopPropagation() in the li.onclick so that clicking on the LI doesn't bubble out to the body.
let li = document.getElementById("li");
let ul = document.getElementById("ul");
let img = document.getElementById("img");
let logo = document.getElementById("logo");
var cancelled;
let i;
// I want clicking on the body to stop this function
li.onclick = function(event) {
event.stopPropagation();
clearInterval(i);
i = setInterval(function() {
ul.style.transition = ".5s";
ul.style.visibility = "visible";
li.style.color = "var(--Almost-Black)";
img.style.transition = ".5s";
img.style.transform = "rotate(180deg)";
ul.style.top = "30px";
}, 1000);
};
document.body.onclick = function() {
clearInterval(i)
}<div class="header">
<div class="container">
<nav>
<div class="logo" id="logo">
<img src="images/logo.svg" alt="">
</div>
<ul>
<li class="li" id="li"><a href="#">Features</a> <img src="images/icon-arrow-down.svg" id="img">
<ul class="ul" id="ul">
<li><img src="images/icon-todo.svg" alt=""> To do list</li>
<li><img src="images/icon-calendar.svg" alt=""> calendar</li>
<li><img src="images/icon-reminders.svg" alt=""> Reminders</li>
<li><img src="images/icon-planning.svg" alt=""> planning</li>
</ul>
</li>
<li class="li"><a href="#">Company</a></li>
<li class="li"><a href="#">Careers</a></li>
<li class="li"><a href="#">About</a></li>
</ul>
<div class="btns">
<button class="login"><a href="#">login</a></button>
<button class="reg"><a href="#">Register</a></button>
</div>
</nav>
</div>
</div>