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

programming
1

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

<!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>
2

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

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

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

Or you can set the onclick as follows:

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

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

[code]

<!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>
4

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.

5

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
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:

<!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>