# Troubles Calling a Function from a Function

**URL:** https://forum.kirupa.com/t/troubles-calling-a-function-from-a-function/656281
**Category:** Uncategorized
**Created:** [January 12, 2023, 5:13pm UTC](https://forum.kirupa.com/t/troubles-calling-a-function-from-a-function/656281 "2023-01-12T17:13:06Z")
**Posts on this page:** 3
**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: [January 12, 2023, 5:13pm UTC](https://forum.kirupa.com/t/troubles-calling-a-function-from-a-function/656281/1 "2023-01-12T17:13:06Z")

</div>

Hello  
[https://vmars.us/Guitar/Which-Button-was-CLICKED-getElementById-101.html](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…

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

---

<div class="post-metadata">

### Author: ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)
#### Post date: [January 13, 2023, 8:47am UTC](https://forum.kirupa.com/t/troubles-calling-a-function-from-a-function/656281/2 "2023-01-13T08:47:51Z")

</div>

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 `return`s if the` timesIn` is 0 and it never gets incremented to 1

```auto
 <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>

```

---

<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: [January 14, 2023, 9:17pm UTC](https://forum.kirupa.com/t/troubles-calling-a-function-from-a-function/656281/3 "2023-01-14T21:17:56Z")

</div>

Thank you steve.mills  
You have answered many Questions 🙂
