Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

JavaScript I am trying to detect Which image id="" was clicked ?

V

vmars316

Well-Known Coder
Thanks

I am trying to detect Which image id="" was clicked ?

Pls , how can I do that ?

Run code here:
https://vmars.us/ShowMe/function-fireContextMenu-2-IMAGES.html

There are 2 images :

Code: 
<span class="a"><div class="hero" id="elem1"><img style="z-index:800; width:32px; height:32px; " src="1-Red-Circle-Transp.png" ></div>  <!--  -->
</span>

<span class="a"><div class="hero draggable"  id="elem2"><img class="draggable"; style="z-index:500; width:20px; height:20px;" src="naturalAccidental-Grey-vm.png"></div>  <!--  -->
</span>

Here is where in code I want to do it :

Code: 
function fireContextMenu(event) {

  event.preventDefault();

console.log("function fireContextMenu( )")

console.log("event.target.id = " + event.target.id)



//  if element.id = "elem1" {

element.id = document.getElementById("elem1").innerHTML

console.log("element.id = " + element.id)



FULL CODE:

Code: 
<!DOCTYPE html>

<!-- saved from url=(0043)https://en.js.cx/task/drag-heroes/solution/ -->

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>file:///C:/PureBasic-myApps/vmProjects/BUTTONS/Guitar-Scales-and-Boxes/DnD.en.js.cx-Super-Heroes/en.js.cx-task-DnD-Multi-Items-WORKING-TRY-STUFF-01.html</title>

<style>

html, body {

  margin: 0;

  padding: 0;

}



span.a {

  display: inline-block;

//  width: 100px;

//  height: 100px;

  padding: 2px;

//  border: 1px solid blue; 

//  background-color: yellow;

}



.hero {



#hero1 , #elem1{

//  background-position: 0 0;

  //position:absolute;

  top: 250px;

//  left: 250px:

  width: 24px;

  width: 24px;

  z-index: 1000;

  float: left;}



#hero2 #elem2{

//  background-position: 0 -128px;

  width:24px;

  width:24px;

  z-index: 500;

  //position:absolute;

  top: 250px;

  float: left;}



.draggable {

  cursor: pointer;

}



#hr01 {

}

</style>

</head>



<body>



<br><br><br><br>

<div id="imagesContainer" style=" width:100%; height:100px;  border-style: dotted; border-size:4px;">



<span class="a"><div class="hero" id="elem1"><img style="z-index:800; width:32px; height:32px; " src="1-Red-Circle-Transp.png" ></div>  <!--  -->

</span>



<span class="a"><div class="hero draggable"  id="elem2"><img class="draggable"; style="z-index:500; width:20px; height:20px;" src="naturalAccidental-Grey-vm.png"></div>  <!--  -->

</span>



</div>  <!--  id="imagesContainer"  -->



<hr id="hr01">



  <div style="clear:both"></div>



  <script>

var elemNumber = 0;

var element = "";

// =================================================



    document.addEventListener('contextmenu', fireContextMenu);



// This function will be called whenever contextmenu event occurs

function fireContextMenu(event) {

  event.preventDefault();

console.log("function fireContextMenu( )")

console.log("event.target.id = " + event.target.id)



//  if element.id = "elem1" {

element.id = document.getElementById("elem1").innerHTML

console.log("element.id = " + element.id)





//function cloneElem1(){

// Get the element

var elem = document.querySelector('#elem1');

//console.log(elem);



// Create a copy of it

var clone = elem.cloneNode(true);

clone.addEventListener("dragstart", (event) => { drag(event); });



// Update the ID and add a class

clone.id = 'elem1' + elemNumber;

clone.draggable = 'true';

clone.onclick = "helloConsole()"

clone.zIndex = elemNumber;

elemNumber = elemNumber + 1



// Inject it into the DOM

hr01.after(clone);

  //function cloneElem1()



}

// =================================================

  </script>



</body></html>



Thanks for your Help...
 
Sort by date Sort by votes
I would do something like this:
JavaScript: 
document.querySelectorAll("img").forEach(function(img) {
  img.onclick = function() {
    console.log(this.id)
  }
})
 
Upvote 0 Downvote
Hmm...
Something's not right :
I get these errors :
Code: 
var elem 02 = undefined
CodeForum.orgfunction-fireContextMenu-2-IMAGES.html:93 Uncaught TypeError: Cannot read properties of null (reading 'cloneNode')
    at HTMLDocument.fireContextMenu (CodeForum.orgfunction-fireContextMenu-2-IMAGES.html:93:18)

Code: 
<!DOCTYPE html>
<!-- saved from url  -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CodeForum.orgfunction-fireContextMenu-2-IMAGES.html</title>

<style>
html, body {
  margin: 0;
  padding: 0;
}

span.a {
  display: inline-block;
//  width: 100px;
//  height: 100px;
  padding: 2px;
//  border: 1px solid blue;   
//  background-color: yellow;
}

.hero {

#hero1 , #elem1{
//  background-position: 0 0;
  //position:absolute;
  top: 250px;
//  left: 250px:
  width: 24px;
  width: 24px;
  z-index: 1000;
  float: left;}

#hero2 #elem2{
//  background-position: 0 -128px;
  width:24px;
  width:24px;
  z-index: 500;
  //position:absolute;
  top: 250px;
  float: left;}

.draggable {
  cursor: pointer;
}

#hr01 {
}
</style>
</head>
<body>
<br><br><br><br> 
<div id="imagesContainer" style=" width:100%; height:100px;  border-style: dotted; border-size:4px;">

<span class="a"><div class="hero" id="elem1"><img style="z-index:800; width:32px; height:32px; " src="1-Red-Circle-Transp.png" ></div>  <!--  -->
</span> 

<span class="a"><div class="hero draggable"  id="elem2"><img class="draggable"; style="z-index:500; width:20px; height:20px;" src="naturalAccidental-Grey-vm.png"></div>  <!--  -->
</span> 

</div>  <!--  id="imagesContainer"  -->

<hr id="hr01">

  <div style="clear:both"></div>

  <script>
var elemNumber = 0;
var element = "";
var elem = "" ;
var hold_this_id = "" ;
// =================================================

    document.addEventListener('contextmenu', fireContextMenu);
    
// This function will be called whenever contextmenu event occurs
function fireContextMenu(event) {
  event.preventDefault();

document.querySelectorAll("img").forEach(function(img) {
  img.onclick = function() {
    console.log("this.id 01 = " + this.id)
  }
})

// Get the element
var elem = document.querySelector(this.id);
    console.log("var elem 02 = " + this.id);     //  89
//console.log(elem);

// Create a copy of it
var clone = elem.cloneNode(true);                // 93
clone.addEventListener("dragstart", (event) => { drag(event); });

// Update the ID and add a class
clone.id = 'elem1' + elemNumber;
clone.draggable = 'true';
clone.onclick = "helloConsole()"
clone.zIndex = elemNumber;
elemNumber = elemNumber + 1

// Inject it into the DOM
hr01.after(clone);
  //function cloneElem1()

}
// =================================================
  </script>

</body>
</html>

Thanks
 
Upvote 0 Downvote
Thanks for your reply:

I like the idea of passing 'this.id' but does html have access to 'this.id' , I thought 'this.id' was a js statement .

Will this actually work , with no quotes ?

How about this onclick="clickid(this.id)";> or "clickid(01)" ?
Thanks

I couldn't get this working :

document.querySelectorAll("img").forEach(function(img) {
img.onclick = function() {
console.log(this.id)
}
})

Apparently 'Not Allowed' to Preserve this.id for future reference .
But I need it to Calculate and Name the Cloned Element .
So , How can I pass it along ?
 
Upvote 0 Downvote
Johna said:
document.querySelectorAll("img").forEach(function(img) { img.onclick = function() { console.log(this.id) } })
Click to expand...
Thanks for your Reply:
I couldn't get this working :

https://vmars.us/Guitar/CodeForum.orgfunction-fireContextMenu-2-IMAGES.html

Errors:
Code: 
var elem 02 = undefined
CodeForum.orgfunction-fireContextMenu-2-IMAGES.html:93 Uncaught TypeError: Cannot read properties of null (reading 'cloneNode')
    at HTMLDocument.fireContextMenu (CodeForum.orgfunction-fireContextMenu-2-IMAGES.html:93:18)


Apparently 'Not Allowed' to Preserve 'this.id' for future reference .
But I need it to Calculate and Name the Cloned Element .
So , How can I pass 'this.id' along ?

Code: 
<!DOCTYPE html>
<!-- saved from url  -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>file:///C:/PureBasic-myApps/vmProjects/BUTTONS/Guitar-Scales-and-Boxes/Drag-Drop-javascript.info/CodeForum.orgfunction-fireContextMenu-2-IMAGES.html
</title>

<style>
html, body {
  margin: 0;
  padding: 0;
}

span.a {
  display: inline-block;
//  width: 100px;
//  height: 100px;
  padding: 2px;
//  border: 1px solid blue;   
//  background-color: yellow;
}

.hero {

#hero1 , #elem1{
//  background-position: 0 0;
  //position:absolute;
  top: 250px;
//  left: 250px:
  width: 24px;
  width: 24px;
  z-index: 1000;
  float: left;}

#hero2 #elem2{
//  background-position: 0 -128px;
  width:24px;
  width:24px;
  z-index: 500;
  //position:absolute;
  top: 250px;
  float: left;}

.draggable {
  cursor: pointer;
}

#hr01 {
}
</style>
</head>
<body>
<br><br><br><br> 
<div id="imagesContainer" style=" width:100%; height:100px;  border-style: dotted; border-size:4px;">

<span class="a"><div class="hero" id="elem1"><img style="z-index:800; width:32px; height:32px; " src="1-Red-Circle-Transp.png" ></div>  <!--  -->
</span> 

<span class="a"><div class="hero draggable"  id="elem2"><img class="draggable"; style="z-index:500; width:20px; height:20px;" src="naturalAccidental-Grey-vm.png"></div>  <!--  -->
</span> 

</div>  <!--  id="imagesContainer"  -->

<hr id="hr01">

  <div style="clear:both"></div>

  <script>
var elemNumber = 0;
var element = "";
var elem = "" ;
var hold_this_id = "" ;
var timesIn = 1;
// =================================================

    document.addEventListener('contextmenu', fireContextMenu);
    
// This function will be called whenever contextmenu event occurs
function fireContextMenu(event) {
  event.preventDefault();

    event.preventDefault();
    if (timesIn == 1) {
       console.log("timesIn = " + timesIn + "   break out");
       timesIn = timesIn + 1 ;
       return ;
       }

document.querySelectorAll("img").forEach(function(img) {
  img.onclick = function() {
    console.log("this.id 01 = " + this.id)
  }
})

// Get the element
var elem = document.querySelector(this.id);
    console.log("var elem 02 = " + this.id);     //  98
//console.log(elem);

// Create a copy of it
var clone = elem.cloneNode(true);                // 102
// 010422 clone.addEventListener("dragstart", (event) => { drag(event); });

// Update the ID and add a class
clone.id = 'elem1' + elemNumber;
clone.draggable = 'true';
clone.onclick = "helloConsole()"
clone.zIndex = elemNumber;
elemNumber = elemNumber + 1

// Inject it into the DOM
hr01.after(clone);
  //function cloneElem1()

}
// =================================================
  </script>

</body>
</html>
 
Last edited:
Upvote 0 Downvote
exploradorgt said:
Works fine here on my end, Edge / Firefox. Should work on your end. Did you put all of that on an html file, saved it and tried it?

Yes, this.id is Javascript, HTML structure allows certain things, just like you can add CSS properties to any html object using style="background-color blah blah;color blah blah;etc;" separated by semicolons, you can also insert javascript the same way using the specific html way to do so, and separating the js using semicolons or just calling a function.
Click to expand...
Ok , Thank you:
I didn't make the connection .
I will ReWrite with your ideas .

Is there such a thing as onRightClick ? I don't think so but had to ask .
Eventually there will be 10 types of images that can be CLONED
These 10 cannot be Draggable .

All the CLONED images can only be Draggable , not Cloned .
 
Last edited:
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
exploradorgt said:
onclick=clickid(this.id);
Click to expand...
Your Code works great , but mine has problems .
I am getting these Errors"
Code: 
timesIn = 1   break out
CodeForum.orgfunction-fireContextMenu-2-IMAGES.html:89 1 elem_id = elem1
CodeForum.orgfunction-fireContextMenu-2-IMAGES.html:94 if (elem_id = elem1
CodeForum.orgfunction-fireContextMenu-2-IMAGES.html:103 elem = elem1
CodeForum.orgfunction-fireContextMenu-2-IMAGES.html:107 Uncaught TypeError: Cannot read properties of null (reading 'cloneNode')
    at cloneOrNot (CodeForum.orgfunction-fireContextMenu-2-IMAGES.html:107:18)
    at HTMLDivElement.onclick (CodeForum.orgfunction-fireContextMenu-2-IMAGES.html:55:61)

I dont know why but js doesnt like how I defined the <div for >elem1 image , line 55 .
And it doesnt like line 107: var clone = elem.cloneNode(true); //
Pls , what am I doing wrong ?

Code: 
<!DOCTYPE html>
<!-- saved from url  -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>file:///C:/PureBasic-myApps/vmProjects/BUTTONS/Guitar-Scales-and-Boxes/Drag-Drop-javascript.info/CodeForum.orgfunction-fireContextMenu-2-IMAGES.html
</title>

<style>
html, body {
  margin: 0;
  padding: 0;
}

span.a {
  display: inline-block;
  padding: 2px;
}

.hero {

#hero1 , #elem1{
//  background-position: 0 0;
  //position:absolute;
  top: 250px;
//  left: 250px:
  width: 24px;
  width: 24px;
  z-index: 1000;
  float: left;}

#hero2 #elem2{
//  background-position: 0 -128px;
  width:24px;
  width:24px;
  z-index: 500;
  //position:absolute;
  top: 250px;
  float: left;}
}

.hero {
  cursor: pointer;
}

#hr01 {
}
</style>
</head>
<body>
<br><br><br><br> 
<div id="imagesContainer" style=" width:100%; height:100px;  border-style: dotted; border-size:4px;">

<span class="a">
<div  onclick="cloneOrNot(this.id)" class="hero" id="elem1">
<img style="z-index:800; width:32px; height:32px; " src="1-Red-Circle-Transp.png" >
</div>
</span> 

<span class="a">
<div  onclick="cloneOrNot(this.id)" class="hero draggable"  id="elem9">
<img style="z-index:500; width:20px; height:20px;" src="naturalAccidental-Grey-vm.png">
</div>
</span> 

</div>  <!--  id="imagesContainer"  -->

<hr id="hr01">

  <div style="clear:both"></div>

  <script>
var elemNumber = 11;
var element = "";
var elem = "" ;
var elem_z_index = 1;
var hold_this_id = "" ;
var timesIn = 1;
// =================================================

//    document.addEventListener('contextmenu', fireContextMenu);
    
// This function will be called whenever contextmenu event occurs
function cloneOrNot(elem_id) {
//  event.preventDefault();
    if (timesIn == 1) {
       console.log("timesIn = " + timesIn + "   break out");
       timesIn = timesIn + 1 ;
       console.log("1 elem_id = " + elem_id)
       return ;
       }

    if (elem_id == "elem1" |   "elem2" |  "elem3" |  "elem4" |  "elem5" |  "elem6" |  "elem7" |  "elem8" |  "elem9" |  "elem10" )  {
       console.log("if (elem_id = " + elem_id);
       }else{
       return ;
    }

//    console.log("2 elem_id = " + elem_id)

// Get the element
var elem = document.querySelector(elem_id);
    console.log("elem = " + elem_id);     // 
//console.log(elem);

// Create a copy of it
var clone = elem.cloneNode(true);         //

// Update the ID and add a class
clone.id = 'elem_id' + elemNumber ;
console.log("clone.id = " + elem_z_index ) ;
clone.draggable = 'true';
clone.onclick = "helloConsole()" ;
clone.zIndex = elem_z_index ;
elemNumber = elemNumber + 1 ;

// Inject it into the DOM
hr01.after(clone);
  //function cloneElem1()

}
// =================================================
  </script>

</body>
</html>

Thanks for your Help...
 
Upvote 0 Downvote
vmars316 said:
I dont know why but js doesnt like how I defined the <div for >elem1 image , line 55 .
And it doesnt like line 107: var clone = elem.cloneNode(true); //
Pls , what am I doing wrong ?
Click to expand...
I don't suppose you have ran your code through the W3C Online HTML validator ? If yes, it should have given you some answers.
If no, that is the most prominent thing you are doing wrong.
 
Last edited by a moderator:
Upvote 0 Downvote
exploradorgt said:
1. Creating a simple JS function receiving a parameter and displaying it on an alert
2. Creating the HTML calling such function and getting it to work telling you "alert: X element was clicked"
3. Creating the if structure to identify and do whatever you want with it
Click to expand...
Ah... all cleaned up , Thank you !
https://vmars.us/Guitar/0106-DnD-TWO-IMAGES-What-If-01.html
Cloned image works fine now .
I can drag Cloned image , and Drop it on <div id="wholeBodyContainer"
but when I Drop it , it snaps back to original position .
Pls , How can I fix this ?
Thanks for your Help...
 
Upvote 0 Downvote
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom