Troubles Calling a Function from a Function

1

Hello
https://vmars.us/Guitar/Which-Button-was-CLICKED-getElementById-101.html
Hmm… seems simple enough but I can’t figure out What I am doing Wrong .
The trouble lines are #59 and line #75 in code below .
Thanks for your Help…

<!DOCTYPE html>
<html>
<head>
<style>
img {
    margin: 5px;
    padding: 5px 8px;
    outline: none;
//    background: #32bacf;
    border: none;
    color: white;
//    border-radius: 5px;
    font-size: 1em;
}

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

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

<img id="Red-Circle" draggable="true" 
src="https://vmars.us/Guitar/1-Red-Circle-Transp-32x32.png" width="32px" height="32px">

<img id="flatAccidental" draggable="true" 
src="https://vmars.us/Guitar/flatAccidental-Grey-28x28.png" width="28px" height="28px">

<img id="naturalAccidental-Grey-28x28" draggable="true"
 src="https://vmars.us/Guitar/naturalAccidental-Grey-28x28.png" width="28px" height="28px">

<img id="sharpAccidental-Grey-28x28" draggable="true" 
src="https://vmars.us/Guitar/sharpAccidental-Grey-28x28.png" width="28px" height="28px">
</div>

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

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

const buttons = document.getElementsByTagName("img"); 
const result = document.getElementById("result");

const buttonPressed = e => { 
  result.innerHTML = e.target.id;
  holdTargetId = e.target.id;
console.log("You clicked this image = " + holdTargetId ) ;

dragElement(holdTargetId);                                           // line  59
console.log("Just Returned from ''dragElement' ") ;
}

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

<script>
var elmnt ;
var timesIn = 0 ;
//document.addEventListener("mousedown", dragElement);

function dragElement(holdTargetId) {                                                //  line 75
  if (timesIn < 1 ) {return}
  timesIn = timesIn + 1 ;

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

Hey mate,
Here’s the script portion of your code.
I modified a few bits for my own readability

  • line 59 is fine
  • line 75 returns if the timesIn is 0 and it never gets incremented to 1
 <script>

let
    targetId = '',
    element = undefined,
    imgCount = 1,
    timesIn = 0,
    pos1 = 0, 
    pos2 = 0, 
    pos3 = 0, 
    pos4 = 0;


// set up listeners on images
(function imgListener (){
    let buttons = document.getElementsByTagName("img"); 
    for (let button of buttons) {
        button.addEventListener("click", buttonPressed);
        imgCount += 1
    }
}())


function buttonPressed ({target}){ 
    targetId = target.id
    document.getElementById("result").innerHTML = target.id;
    dragElement(target);                                           
}


function dragElement(el) {    
  if (timesIn < 1 ) return // the function never gets past here and timesIn never gets incremented
  timesIn +=1 ;
  pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  el.onmousedown = dragMouseDown;  
}


  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();
    let el = e.target;

    // 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:
    el.style.top = (el.offsetTop - pos2) + "px";
    el.style.left = (el.offsetLeft - pos1) + "px";
  }

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


</script>
1 Like
3

Thank you steve.mills
You have answered many Questions :slightly_smiling_face:

1 Like