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 how to modify cloned element style ?

V

vmars316

Well-Known Coder
Hello & TIA ;
Create a Draggable Clone from id="elem1" , where id="elem1" is draggable="false"; .
The coding problem is here : clone.classList.add('draggable="true"')
What is the proper coding ?
Thanks

JavaScript: 
<script>
function cloneElem1(){
// Get the element
var elem = document.querySelector('#elem1');

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

// Update the ID and add a class
clone.id = 'elem2' + elemNumber;
elemNumber = elemNumber + 1
clone.classList.add('text-large');
clone.classList.add("draggable='true';")

// Inject it into the DOM
elem.after(clone);
}
</script>
********
JavaScript: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html</title>
<!--  https://www.freeformatter.com/html-validator.html  -->
<style>
body {
      margin: 20px;
      background-color: #FFFFFF;
    }
.flex-container {
  display: flex;
}

.flex-container > div {
  font-size: 20px;
}
    #container {
      width: 100%;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      counter-reset: itemCount;
    }
    .item {
      display: inline-block;
      border-radius: 50%;
      touch-action: none;
      user-select: none;
      counter-increment: itemCount;
      content: 'count' + itemCount;
      width: 32px;
      height: 32px;
      background-color: #F5F5F5;  //  whitesmoke
      font-family: Arial, Helvetica, sans-serif;
      text-align:center;
      font-size:28px;
      z-index: 8;
    }
    
.flatOne , .sharpOne , .naturalOne { background-color: #DCDCDC;
z-index: 5;
}
    
td {margin: auto;
}
    
#elem1 , #elem2 , #elem3 , #elem4(
)

.flatOne , .one , .sharpOne , naturalOne {
}
    
#itemContainer {    }
#tableContainer {    }
#fretboardContainer { background-color: #DCDCDC;
}
tbody { background-color:#636363;
}
#tbodyId { background-color:#636363;
}
   .item:active {
      opacity: .75;
    }
    .item:hover {
      cursor: pointer;
    }
  </style>
</head>

<body>
<div id="outerContainer" ondrop="drop(event)"  ondragover="allowDrop(event)" style="background-color: pink; top: 4px;  left: 4px; height:200px;  border: 4px;">  <!--  BEGIN OF id="outerContainer  -->

<div>
  X: <span id="x"></span><br>
  Y: <span id="y"></span>
</div>

<!--  BEGIN of id="itemContainer"  -->
<div id="itemContainer"  class="flex-container POS" style=" position: absolute;  left: 500px; top; 40px; "> 
  <div class="item flatOne" id="elem1" onclick="cloneElem1()"      style=" z-index:5;  left: 100px;    background-color: #DCDCDC" > b</div>   
  <p>&nbsp;&nbsp;</p>
  <div class="item one" id="elem2"            style=" z-index:5;  left: 400px;    background-color: #FF0004;" > 1</div>   
  <p>&nbsp;&nbsp;</p>
  <div class="item sharpOne" id="elem3"    style=" z-index:5;  left: 700px;    background-color: #DCDCDC;" > ♯</div>   
  <p>&nbsp;&nbsp;</p>
  <div class="item naturalOne" id="elem4"  style=" z-index:5;  left: 1000px;  background-color: #DCDCDC;" > ♮</div>   
</div>   <!--  END of id="itemContainer"  -->

<div id="tableContainer" style="  position: absolute;  top: 155px; left: 55px; ">  <!--  BEGIN of id="tableContainer"  -->
<table   id="fretboardContainer" style=" position: absolute ; width: 1200px;">    <!-- BEGIN of  id="fretContainer"  -->
<!--  Start Copy Here  -->
<tbody id="tbodyId" style="background-color:#636363;">
<tr style="height: 40px; border-bottom: 2px solid red;  border-top: 3px solid white;"> 
<!-- Row 1  -->
<td id="r1f1" ondrop="drop(event)" ondragover="allowDrop(event)" style="margin: auto; vertical-align: top; border-bottom: 3px solid white;  border-top: 4px solid white;"><br>
</td>
<td id="r1f2" ondrop="drop(event)" ondragover="allowDrop(event)" style="margin: auto; vertical-align: top; border-bottom: 2px solid white;  border-top: 4px solid white;"><br>
</td>
<td id="r1f3" ondrop="drop(event)" ondragover="allowDrop(event)" style="margin: auto; vertical-align: top; border-bottom: 2px solid white;  border-top: 4px solid white;"><br>
</td>
<td id="r1f4" ondrop="drop(event)" ondragover="allowDrop(event)" style="margin: auto; vertical-align: top; border-bottom: 2px solid white;  border-top: 4px solid white;"><br>
</td>
</tr>
</tbody>
</table> <!--  END OF  fretContainer   -->
</div>    <!--   END OF  tableContainer   -->
</div>    <!--  END OF id="outerContainer  -->

<div style='text-align: center; position:absolute; bottom: 40px;'>Drag and Drop</div>

<!--  BEGIN SCRIPT  ZZZZZZZZZZZZZZZZZ  -->
<script>
window.addEventListener('mousemove', (event) => {
  let x = event.clientX;
  let y = event.clientY;

  document.getElementById('x').innerHTML = x;
  document.getElementById('y').innerHTML = y;
});
</script>

<script>
var elemNumber = 0;
</script>

<script>
function cloneElem1(){
// Get the element
var elem = document.querySelector('#elem1');

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

// Update the ID and add a class
clone.id = 'elem2' + elemNumber;
elemNumber = elemNumber + 1
clone.classList.add('text-large');
clone.classList.add("draggable=&quot;true&quot;")

// Inject it into the DOM
elem.after(clone);
}
</script>

<script>
function allowDrop(ev) {
  ev.preventDefault();
//  console.log("function allowDrop(ev)")
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
  console.log("function function drag(ev)")
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
  console.log("function drop(ev)")
}
</script>

</body>
</html>
 
Solution
D
I see. Did you not wonder why you are getting TWO errors, which are identical except for the originating element ? If you think about that you'll realize that not only the table elements are drop targets (which they should be), but also the entire outerContainer, which probably shouldn't be :

HTML: 
<div id="outerContainer" ondrop="drop(event)"  ondragover="allowDrop(event)" style="background-color: pink; top: 4px;  left: 4px; height:200px;  border: 4px;">

Of course you can have multiple drop targets but there's no point in having them overlap. So I removed that drop stuff from the above and got only one error. Actually this is the same problem you had earlier. If you look closely at your code, you will see that your function...
Sort by date Sort by votes
You might want to explain the problem a bit better than just saying "the function drop(ev) is not working" and linking to your web page. At the very least, give the exact steps to reproduce the problem.
 
Upvote 0 Downvote
Yes , of course , Sorry:
Go to here: https://vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html
Open up Console
Click on the 'b' grey circle
Drag the Cloned 'b' grey circle onto the Dark Grey Fretboard .
See Errors in Console.log .
Thanks

These are Errors I am getting .
Code: 
Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:169 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at drop (Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:169:13)
    at HTMLTableCellElement.ondrop (Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:108:171)
Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:169 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at drop (Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:169:13)
    at HTMLDivElement.ondrop (Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:82:160)
 
Upvote 0 Downvote
I see. Did you not wonder why you are getting TWO errors, which are identical except for the originating element ? If you think about that you'll realize that not only the table elements are drop targets (which they should be), but also the entire outerContainer, which probably shouldn't be :

HTML: 
<div id="outerContainer" ondrop="drop(event)"  ondragover="allowDrop(event)" style="background-color: pink; top: 4px;  left: 4px; height:200px;  border: 4px;">

Of course you can have multiple drop targets but there's no point in having them overlap. So I removed that drop stuff from the above and got only one error. Actually this is the same problem you had earlier. If you look closely at your code, you will see that your function drag(ev) is not being called, and as a consequence you get the error because the id is not passed on. The reason why it's not called is because you forgot to add a dragstart event to your cloned element. Adding this line will fix that :
JavaScript: 
clone.addEventListener("dragstart", (event) => { drag(event); });
 
Upvote 0 Downvote
Solution
Merry Christmas !!!
Job 33:23
23 If there be for him an angel,
a mediator, one of the thousand,
to declare to man what is right for him,
Isaiah 9:6
6 For unto us a child is born, unto us a son is given:
and the government shall be upon his shoulder:
and his name shall be called Wonderful, Counsellor,
The mighty God, The everlasting Father,
The Prince of Peace.
John 1:14
And the Word became flesh and dwelt among us,
and we have seen his glory,
glory as of the only Son from the Father,
full of grace and truth.
Hebrews 9:15
Therefore he is the mediator of a new covenant,
so that those who are called may receive
the promised eternal inheritance,
Happy Birthday Jesus !!!
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
Code Academy Advertisement
DataCamp 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