title: I can not terminate a function in JS
body: <p>I have two js functions for the one same input (type=&quot;file&quot;). They work by onclick attribute however when i click just for the second function, first one still works.. (Maybe beacuse of input changes..) I tried &quot;return&quot; or &quot;break&quot; to terminate but they didnt help. How can i terminate the function if it has finished its job.</p>
  <p>■ HTML tags;</p>
  <pre><code>&lt;input id=&quot;File1&quot;  type=&quot;file&quot; name=&quot;galeri[]&quot; accept=&quot;image/*&quot; hidden=&quot;&quot;&gt;
  &lt;label id=&quot;Label1&quot; class=&quot;uploadProductPic&quot; data-no=&quot;1&quot; for=&quot;File1&quot; onclick=&quot;myFunction(this)&quot;&gt;&lt;i class=&quot;fas fa-plus&quot;&gt;&lt;/i&gt;&lt;/label&gt;
  </code></pre>
  <p>and if i added a new picture codes below will be creating by myFunction</p>
  <pre><code>&lt;div id=&quot;Picture1&quot; onmouseover=&quot;mouseOnPic(this)&quot; onmouseout=&quot;mouseOutPic(this)&quot; class=&quot;ilanPreview d-flex justify-content-center&quot;&gt;
      &lt;img src=&quot;img/pgiysi/pgiysi-44-2761428725-1.png&quot; class=&quot;d-block&quot; id=&quot;imgPicture1&quot;&gt;
      &lt;div class=&quot;ilanPreviewEdit&quot; hidden=&quot;true&quot; data-edit=&quot;1&quot; onclick=&quot;myEdit(this)&quot;&gt;&lt;i class=&quot;fas fa-edit&quot;&gt;&lt;/i&gt;&lt;div class=&quot;ilanPreviewEEText&quot;&gt;Düzenle&lt;/div&gt;&lt;/div&gt;
      &lt;div class=&quot;ilanPreviewErase&quot; hidden=&quot;false&quot; onclick=&quot;myErase(this)&quot;&gt;&lt;i class=&quot;fa fa-trash-o&quot;&gt;&lt;/i&gt;&lt;div class=&quot;ilanPreviewEEText&quot;&gt;Sil&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>■ First function is; (Creates a preview of image for the selected file from input and creates a new add input type=&quot;file&quot;)</p>
  <pre><code>  var i = 1;
  function myFunction(identifier) {
    i++
    no = $(identifier).data('no');
  
    var loader = function(e) {
  
  //content goes here
  //create a preview of image
  //add a new input file
  
  }
    var fileInput = document.querySelector(&quot;#File&quot;+editNo);
    fileInput.addEventListener(&quot;change&quot;, loader);
  };
  </code></pre>
  <p>■ Second function is; (Jjust for the changing picture. If user clicks on the change button - that created on preview image before, so this function changes the preview of image.</p>
  <pre><code>function myEdit(identifier) {
    var editNo = $(identifier).data('edit');
    document.getElementById('File'+editNo).click();
  
  var editor = function(e) {
  
  //content goes here
  //change the preview of image
  
  return false; //After changing picture stop here and dont step to the first function again...
  }
    var fileInput = document.querySelector(&quot;#File&quot;+editNo);
    fileInput.addEventListener(&quot;change&quot;, editor);
  };
  </code></pre>
  <p>When I click to change the picture, yes it changes but at the same time function add a new preview (same with selected one for the change and adds a new input file so i have 2 previews and 2 add buttons)</p>