How can I disable my click/drag selection box after one use?

I was wondering if anyone could help provide some input as to how I could disable the mousedown function after one instance of its use. The way I want it to work is so that it only works when enabled = true, and I change its value throughout the code in order to make it false by the end of the iteration of the functions. But for some reason despite it being false now it continues to be active. I was wondering if there is something I’m missing or if my approach to it is wrong. Any input would be a massive help.

Here is my code:

<html>

<head>
  <link rel="stylesheet" href="styles/styleSheet.css">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edstore">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <!--BOOTSTRAP ASSETS-->
  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&family=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>



</head>

<body>
  <div class="sideform">
    <h1>Custom App</h1>
    <h2>Doc Type: (Single/Multi)</h2>
    <h2>Extract Type:</h2>
    <br>
    <form action="">

      <!--TOGGLE VISIBILITY FOR...-->
      <!--ANGLE-->
      <label class="switch">
          <input type="checkbox">
          <span class="slider-angle"></span>
      </label>
      <br>
      <br>
      <!--LINES-->
      <label class="switch">
          <input type="checkbox">
          <span class="slider-lines"></span>
      </label>
      <br>
      <br>
      <!--TEXT-->
      <label class="switch">
          <input type="checkbox">
          <span class="slider-text"></span>
      </label>

      <!--SPECIFY TABULAR EXTRACTION FOR...-->
      <!--LATTICE TABLES-->
      <h3>Lattice Tables</h4>
        <label for="table2">Table:</label>
        <button type="button" class="button" id="table2" name="table2" onclick="buttonClick()">Table Outline</button>
        <br>
        <label for="header2">Header:</label>
        <button type="button" class="button" id="header2" name="header2">Header Outline</button>
        <br>
        <label for="rel2">Relevant Lines:</label>
        <button type="button" class="button" id="rel2" name="rel2">Relevant Lines</button>
        <br>
        <label for="ignore2">Lines to Ignore:</label>
        <button type="button" class="button" id="ignore2" name="ignore2">Ignore Lines</button>

        <!--STREAM TABLES-->
        <h3>Stream Tables</h4>
          <label for="table1">Table:</label>
          <button type="button" class="button" id="table1" name="table1">Table Outline</button>
          <br>
          <label for="header1">Header:</label>
          <button type="button" class="button" id="header1" name="header1">Header Outline</button>
          <br>
          <label for="rel1">Relevant Lines:</label>
          <button type="button" class="button" id="rel1" name="rel1">Relevant Lines</button>

          <h2>Clustering Type:(X/Y/None)</h2>

          <label for="conversion"></label>
          <button type="submit" id="conversion" name="conversion" class="button">Perform Conversion</button>



    </form>
  </div>
  <div class="main">
    <div id="selection_box"></div>
    <h1 class="title">(FILE NAME)</h1>
    <div id="cloud_main_page">
      <div class="cloud_mouse_selection"></div>
    </div>


  </div>
  <script>
    var enabled = false;

    let canvasElem = document.querySelector("body");

    function getCursorPosition(e) {
      e = e || window.event;
      if (e) {
        if (e.pageX || e.pageX == 0) return [e.pageX, e.pageY];
        var dE = document.documentElement || {};
        var dB = document.body || {};
        if ((e.clientX || e.clientX == 0) && ((dB.scrollLeft || dB.scrollLeft == 0) || (dE.clientLeft || dE.clientLeft == 0)))
          return [e.clientX + (dE.scrollLeft || dB.scrollLeft || 0) - (dE.clientLeft || 0), e.clientY + (dE.scrollTop || dB.scrollTop || 0) - (dE.clientTop || 0)];
      }
      return null;
    }

    function buttonClick() {
      setTimeout(function() {
        enabled = true;
        console.log(enabled)
        startWorking();
      }, 1500);
    }

    function mousedown(e) {
      getMousePosition(canvasElem, e);
      var mxy = getCursorPosition(e);
      var box = document.getElementById("selection_box");
      box.orig_x = mxy[0];
      box.orig_y = mxy[1];
      box.style.left = mxy[0] + "px";
      box.style.top = mxy[1] + "px";
      box.style.display = "block";
      document.onmousemove = mousemove;
      document.onmouseup = mouseup;
    }

    function mousemove(e) {
      var mxy = getCursorPosition(e);
      var box = document.getElementById("selection_box");
      box.style.width = (mxy[0] - box.orig_x) + "px";
      box.style.height = (mxy[1] - box.orig_y) + "px";
    }

    function mouseup(e) {
      var mxy = getCursorPosition(e),
        box = document.getElementById("selection_box"),
        image_box = document.getElementById("image_box"),
        selection = getSelection;
      box.style.display = "none";
      box.style.width = "0";
      box.style.height = "0";
      document.onmousemove = function() {};
      document.onmouseup = function() {};
      getMousePosition(canvasElem, e);
      console.log(enabled);
    }

    function startWorking() {
      if (enabled) {
        document.onmousedown = mousedown;
        enabled = false;
      }
    }


    function getMousePosition(canvas, event) {
      let rect = canvas.getBoundingClientRect();
      let x = event.clientX - rect.left;
      let y = event.clientY - rect.top;
      console.log("Coordinate x: " + x,
        "Coordinate y: " + y);
    }
  </script>
</body>

JavaScript
​x
 
<html>
​
<head>
  <link rel="stylesheet" href="styles/styleSheet.css">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edstore">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
​
​
  <!--BOOTSTRAP ASSETS-->
  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&family=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
​
​
​
</head>
​
<body>
  <div class="sideform">
    <h1>Custom App</h1>
    <h2>Doc Type: (Single/Multi)</h2>
    <h2>Extract Type:</h2>
    <br>
    <form action="">
​
      <!--TOGGLE VISIBILITY FOR...-->
      <!--ANGLE-->
      <label class="switch">
          <input type="checkbox">
          <span class="slider-angle"></span>
      </label>
      <br>
      <br>
      <!--LINES-->
      <label class="switch">
          <input type="checkbox">
          <span class="slider-lines"></span>
      </label>
      <br>
      <br>
      <!--TEXT-->
      <label class="switch">
          <input type="checkbox">
          <span class="slider-text"></span>
      </label>
​
      <!--SPECIFY TABULAR EXTRACTION FOR...-->
      <!--LATTICE TABLES-->
      <h3>Lattice Tables</h4>
        <label for="table2">Table:</label>
        <button type="button" class="button" id="table2" name="table2" onclick="buttonClick()">Table Outline</button>
        <br>
        <label for="header2">Header:</label>
        <button type="button" class="button" id="header2" name="header2">Header Outline</button>
        <br>
        <label for="rel2">Relevant Lines:</label>
        <button type="button" class="button" id="rel2" name="rel2">Relevant Lines</button>
        <br>
        <label for="ignore2">Lines to Ignore:</label>
        <button type="button" class="button" id="ignore2" name="ignore2">Ignore Lines</button>
​
        <!--STREAM TABLES-->
        <h3>Stream Tables</h4>
          <label for="table1">Table:</label>
          <button type="button" class="button" id="table1" name="table1">Table Outline</button>
          <br>
          <label for="header1">Header:</label>
          <button type="button" class="button" id="header1" name="header1">Header Outline</button>
          <br>
          <label for="rel1">Relevant Lines:</label>
          <button type="button" class="button" id="rel1" name="rel1">Relevant Lines</button>
​
          <h2>Clustering Type:(X/Y/None)</h2>
​
          <label for="conversion"></label>
          <button type="submit" id="conversion" name="conversion" class="button">Perform Conversion</button>
​
​
​
    </form>
  </div>
  <div class="main">
    <div id="selection_box"></div>
    <h1 class="title">(FILE NAME)</h1>
    <div id="cloud_main_page">
      <div class="cloud_mouse_selection"></div>
    </div>
​
​
  </div>
  <script>
    var enabled = false;
​
    let canvasElem = document.querySelector("body");
​
    function getCursorPosition(e) {
      e = e || window.event;
      if (e) {
        if (e.pageX || e.pageX == 0) return [e.pageX, e.pageY];
        var dE = document.documentElement || {};
        var dB = document.body || {};
        if ((e.clientX || e.clientX == 0) && ((dB.scrollLeft || dB.scrollLeft == 0) || (dE.clientLeft || dE.clientLeft == 0)))
          return [e.clientX + (dE.scrollLeft || dB.scrollLeft || 0) - (dE.clientLeft || 0), e.clientY + (dE.scrollTop || dB.scrollTop || 0) - (dE.clientTop || 0)];
      }
      return null;
    }
​
    function buttonClick() {
      setTimeout(function() {
        enabled = true;
        console.log(enabled)
        startWorking();
      }, 1500);
    }
​
    function mousedown(e) {
      getMousePosition(canvasElem, e);
      var mxy = getCursorPosition(e);
      var box = document.getElementById("selection_box");
      box.orig_x = mxy[0];
      box.orig_y = mxy[1];
      box.style.left = mxy[0] + "px";
      box.style.top = mxy[1] + "px";
      box.style.display = "block";
      document.onmousemove = mousemove;
      document.onmouseup = mouseup;
    }
​
    function mousemove(e) {
      var mxy = getCursorPosition(e);
      var box = document.getElementById("selection_box");
      box.style.width = (mxy[0] - box.orig_x) + "px";
      box.style.height = (mxy[1] - box.orig_y) + "px";
    }
​
    function mouseup(e) {
      var mxy = getCursorPosition(e),
        box = document.getElementById("selection_box"),
        image_box = document.getElementById("image_box"),
        selection = getSelection;
      box.style.display = "none";
      box.style.width = "0";
      box.style.height = "0";
      document.onmousemove = function() {};
      document.onmouseup = function() {};
      getMousePosition(canvasElem, e);
      console.log(enabled);
    }
​
    function startWorking() {
      if (enabled) {
        document.onmousedown = mousedown;
        enabled = false;
      }
    }
​
​
    function getMousePosition(canvas, event) {
      let rect = canvas.getBoundingClientRect();
      let x = event.clientX - rect.left;
      let y = event.clientY - rect.top;
      console.log("Coordinate x: " + x,
        "Coordinate y: " + y);
    }
  </script>
</body>

Answer

After a lot of trial and error I found out a solution to the problem. I created another function with the sole purpose of stopping the execution of mousedown() titled stopWorking.

Here is the function:

function stopWorking(){
if (enabled){
    enabled = false;
    document.onmousedown = null;        
}

JavaScript
 
function stopWorking(){
if (enabled){
    enabled = false;
    document.onmousedown = null;        
}
​

}

The reason I had to set document.onmousedown = null, is because after it is set to mouseup it continues that way no regardless of if I change enabled to equal false, since it has already been activated. And I inserted it at the end of the mouseup function (it is the last function called within the sequence of creating the highlight box.) Here is the code for that:

function mouseup(e) {
var mxy = getCursorPosition(e),
    box = document.getElementById("selection_box"),
    image_box = document.getElementById("image_box"),
    selection = getSelection;
box.style.display = "none";
box.style.width = "0";
box.style.height = "0";
document.onmousemove = function () {};
document.onmouseup = function () {};
getMousePosition(canvasElem, e);
stopWorking();
console.log(enabled);
}

JavaScript
 
function mouseup(e) {
var mxy = getCursorPosition(e),
    box = document.getElementById("selection_box"),
    image_box = document.getElementById("image_box"),
    selection = getSelection;
box.style.display = "none";
box.style.width = "0";
box.style.height = "0";
document.onmousemove = function () {};
document.onmouseup = function () {};
getMousePosition(canvasElem, e);
stopWorking();
console.log(enabled);
}
​

The reason I had to set document.onmousedown = null, is because after it is set to mouseup it continues that way no regardless of if I change enabled to equal false, since it has already been activated. Hope this helps anyone else going forward with similar issues!

Advertisement

Answer