els.forEach((name) , Is name a Function?

Thanks for your Help…
Two questions really .

const els = document.querySelectorAll(".item");
els.forEach((name) => {
console.log("els.forEach = " + name ) ;
  dragElement(name);
});

In that syntax , I thought name should be a Function ,
Pls , what is it ?

Also:

  function dragMouseDown(e) {
    e = e || window.event;
console.log("function dragMouseDown = " + e.target.id) ;
    e.preventDefault();

What does e = e || window.event; do ?

Complete code:


<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>

.item {
  position:absolute ;
  border-radius: 50%;
}


#elem1 {
  z-index: 9;
  top:0;
  float:left;
  width:32px; height:32px;  left: 30%;  background-color: #FF0004;
}


#elem2 {
  z-index: 8;
  top:0;
  float:left;
  width:32px; height:32px;   left: 32%;  background-color: #FE8E05;
}

div:hover {
//    background-color: #ffa000;
    cursor: pointer;
}

#result {
  border:1px solid;
  display:inline-block;
  margin:5px;
/*   padding:5px; */
}
</style>
</head>
<body>

<div id="elemContainer" style="position: absolute;  width: 1420px; height: 750px;  display:inline-block; ">

  <div class="item" id="elem1" draggable="true" style="">&nbsp;&nbsp;1</div>
 
  <div class="item" id="elem2" draggable="true" style="">&nbsp;&nbsp;2</div>
 
 </div>  <!--   id="elemContainer"  -->

<div id="result">result = </div>

<script>
var e ;
var elmnt ;
var eventHold ;
var holdTargetId ;
var holdTarget ;


const els = document.querySelectorAll(".item");
els.forEach((name) => {
console.log("els.forEach = " + name ) ;
  dragElement(name);
});

function dragElement(elmnt) {
console.log("function dragElement() = "  + elmnt) ;
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
//debugger

   elmnt.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    e = e || window.event;
console.log("function dragMouseDown = " + e.target.id) ;
    e.preventDefault();
    
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
console.log("function elementDrag(e)") ;

    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
console.log("function closeDragElement()")
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>

</body></html> 

name in that case would be an object, not a function. To be specific in that case, it’s a DOM node from a DOM node list. The object would have properties that you can access.

Here is a page on querySelectorAll to explain it better…

That method is expecting an event to fire, which is used inside the method. That line will initialize it with SOMETHING instead of letting an error occur. It’s like a default parameter setting in any other language (setting a string to ‘’, setting an int to 0)

2 Likes

Hi @lg15,

  1. It actually isn’t a name, it’s the reference do the current element of the node list over which you’re iterating
  2. That should be the event currently being processed, but i’s deprecated – you can just omit it here
1 Like

Ahhh

Thanks Folks !!

1 Like

To be precise, what you’re seeing is called Big Arrow Notation.

Is equivalent to:
els.forEach(function (name) {
so name in this case is a parameter to the (anonymous) function, which forEach fills with the current element of the loop.

1 Like

Oh , I see ,
Very Helpful info ,
Thank you!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.