# ? para.setAttribute(onclick, "myFunction1(para.id)")

**URL:** <https://forum.kirupa.com/t/para-setattribute-onclick-myfunction1-para-id/656704>\
**Category:** programming\
**Created:** [February 2, 2023, 8:38pm UTC](https://forum.kirupa.com/t/para-setattribute-onclick-myfunction1-para-id/656704 "2023-02-02T20:38:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Post date:** [February 2, 2023, 8:38pm UTC](https://forum.kirupa.com/t/para-setattribute-onclick-myfunction1-para-id/656704/1 "2023-02-02T20:38:58Z")

</div>

Thanks for your Help…  
Is an element onclick an attribute or a property ?  
Anyways what am I doing wrong ?

```auto
<!DOCTYPE html>
<html>
<body>

<h1>The Document Object</h1>
<h2>The createElement() Method</h2>

<p>Create a p element and append it to "myDiv":</p>

<div id="myDIV" style="padding:16px;background-color:lightgray">
<h3>A DIV element</h3>
</div>

<script>
function myFunction1() {
alert("onClick WORKED!") ;
}
</script>

<script>
// Create element:
const para = document.createElement("p");
para.innerHTML = "This is para.innerHTML.";

para.setAttribute(onclick, "myFunction1()") ;

// Append to another element:
document.getElementById("myDIV").appendChild(para);
</script>
</body>
</html>
```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [February 2, 2023, 9:28pm UTC](https://forum.kirupa.com/t/para-setattribute-onclick-myfunction1-para-id/656704/2 "2023-02-02T21:28:17Z")

</div>

This approach won’t work AFAIK. What you can do is use **addEventListener** :

```auto
para.addEventListener("click", clickMe, false);

function clickMe(event) {
   console.log("Clicked!");
};

```

Or you can set the **onclick** as follows:

```auto
para.onclick = function() {
   console.log("Clicked!");
};

```

---

<div class="post-metadata">

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Post date:** [February 3, 2023, 12:32am UTC](https://forum.kirupa.com/t/para-setattribute-onclick-myfunction1-para-id/656704/3 "2023-02-03T00:32:39Z")

</div>

Thanks ,  
Here is the bigger picture:  
How can I make ‘function dragMouseDown’ and  
other Functions run ? So Far , NO GO .  
In future versions I will Create newElements , 20 or more , and be able to DnD each anywhere on window . That’s why I wanted to build an click/onclick into Element as it was being created .  
Thanks…  
[https://vmars.us/Guitar/Which-DIV-was-CLICKED-BY-PARENT.html](https://vmars.us/Guitar/Which-DIV-was-CLICKED-BY-PARENT.html)

[code]

```auto
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
img {
    margin: 5px;
    padding: 5px 8px;
    outline: none;
    border: none;
    color: white;
    font-size: 1em;
}

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="border-radius: 50%; width:32px; height:32px; position: relative; float:left; left: 30%; top:0; background-color: #FF0004;">&nbsp;1</div>
 
 <div class="item" id="elem2" draggable="true" style="border-radius: 50%; width:32px; height:32px; position: relative; float:left; left: 31%; top: 0; background-color: #FE8E05;">&nbsp;2</div>
 
 </div> <!-- id="elemContainer" -->

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

<script>
var holdTargetId ;
// dragElement(holdTargetId) ;

const divGroup = document.getElementById("elemContainer");
const result = document.getElementById("result");

const divGroupPressed = e => { 
  
  const isDiv = e.target.nodeName === 'DIV';
  
  if(!isDiv) {
    return
  }
 
 holdTargetId = e.target.id ;
  console.log("holdTargetId = " + holdTargetId) ;
  
  dragElement(holdTargetId) ;
}
divGroup.addEventListener("click", divGroupPressed);

</script>

<script>
var elmnt ;
var timesIn = 0 ;

function dragElement(holdTargetId) {
console.log("function dragElement(elmnt = " + holdTargetId) ;
  elmnt = holdTargetId ;

// var savedTargetId = event.target.id ;
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

   elmnt.onmousedown = dragMouseDown;  
}

  function dragMouseDown(e) {
console.log("function dragMouseDown(e)") ;
    e = e || window.event;
    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>
```

---

<div class="post-metadata">

**Author:** ![PAEz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/paez/32/19607_2.png) [@PAEz](https://forum.kirupa.com/u/PAEz)\
**Post date:** [February 3, 2023, 3:30pm UTC](https://forum.kirupa.com/t/para-setattribute-onclick-myfunction1-para-id/656704/4 "2023-02-03T15:30:29Z")

</div>

hehe, I thought you had this!  
You should have been able to drag as many elelemnts as you wanted with the old one.  
Anywayz, I havent tried this one but theres one obvious mistake just glancing at the code.  
In dragElement you define pos1-4 and then try to access them in other functions. They only exist in the scope of dragElement, move them to above the definition of dragElement…no idea if this will make it work.

---

<div class="post-metadata">

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Post date:** [February 4, 2023, 10:42pm UTC](https://forum.kirupa.com/t/para-setattribute-onclick-myfunction1-para-id/656704/5 "2023-02-04T22:42:12Z")

</div>

Hi PAEz ;  
Yes , DnD Create Elements works fine .  
I am trying to modify this Code:  
[https://www.w3schools.com/howto/tryit.asp?filename=tryhow\_js\_draggable](https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable)  
Which works for ‘1 div Only’  
and make it work for ‘Multiple divs’ .  
That code is ‘Lightning Fast’ .  
The above code is an experiment to see ‘How to’ call Functions and pass info .  
My code:

```auto
<!DOCTYPE html>
<!-- saved from url=(0085)file:///C:/2023-Drag-Drop-AnyWhere/TRY-THIS/Which-DIV-was-CLICKED-getElementById.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
img {
    margin: 5px;
    padding: 5px 8px;
    outline: none;
    border: none;
    color: white;
    font-size: 1em;
}

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="border-radius: 50%; width:32px; height:32px; position: relative; float:left; left: 30%; top:0; background-color: #FF0004;">&nbsp;1</div>
 
 <div class="item" id="elem2" draggable="true" style="border-radius: 50%; width:32px; height:32px; position: relative; float:left; left: 31%; top: 0; background-color: #FE8E05;">&nbsp;2</div>
 
 </div> <!-- id="elemContainer" -->

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

<script>
var holdTargetId = "" ;
var thruCount = 1;
var elmnt ;

const elemContainer = document.getElementsByTagName("div"); 
const result = document.getElementById("result");

const buttonPressed = e => { 
  result.innerHTML = e.target.id;
  holdTargetId = e.target.id;
console.log("const buttonPressed = " + holdTargetId ) ;
// dragElement(holdTargetId) ;
  return holdTargetId;
}

for (let div of elemContainer) {
  console.log( "thruCount = " + thruCount);
  div.addEventListener("click", buttonPressed);
  thruCount = thruCount + 1;
}
</script>

<script>
var elmnt ;
var timesIn = 0 ;
dragElement(document.getElementById("elem1"));

function dragElement(elmnt) {
console.log("dragElement(holdTargetId)") ;
  buttonPressed(holdTargetId)
  
  elmnt = holdTargetId ;

console.log("function dragElement(elmnt" + holdTargetId) ;
// var savedTargetId = event.target.id ;
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  console.log("console.log says = " + holdTargetId);

   elmnt.onmousedown = dragMouseDown;  
}

  function dragMouseDown(e) {
console.log("function dragMouseDown(e)") ;
    e = e || window.event;
    e.preventDefault();
	
	console.log("function dragMouseDown(e)") ;
    // 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>

```
