0

I have two js functions for the one same input (type="file"). 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 "return" or "break" to terminate but they didnt help. How can i terminate the function if it has finished its job.

■ HTML tags;

<input id="File1"  type="file" name="galeri[]" accept="image/*" hidden="">
<label id="Label1" class="uploadProductPic" data-no="1" for="File1" onclick="myFunction(this)"><i class="fas fa-plus"></i></label>

and if i added a new picture codes below will be creating by myFunction

<div id="Picture1" onmouseover="mouseOnPic(this)" onmouseout="mouseOutPic(this)" class="ilanPreview d-flex justify-content-center">
    <img src="img/pgiysi/pgiysi-44-2761428725-1.png" class="d-block" id="imgPicture1">
    <div class="ilanPreviewEdit" hidden="true" data-edit="1" onclick="myEdit(this)"><i class="fas fa-edit"></i><div class="ilanPreviewEEText">Düzenle</div></div>
    <div class="ilanPreviewErase" hidden="false" onclick="myErase(this)"><i class="fa fa-trash-o"></i><div class="ilanPreviewEEText">Sil</div></div>
</div>

■ First function is; (Creates a preview of image for the selected file from input and creates a new add input type="file")

  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("#File"+editNo);
  fileInput.addEventListener("change", loader);
};

■ 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.

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("#File"+editNo);
  fileInput.addEventListener("change", editor);
};

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)

korkut
  • 1
  • 1
  • You've not included how you've tried to cancel out of the first (first called=second function=myEdit?) function. Most likely you've put a `return false` inside `editor = function` - return only returns from the enclosing `function` - add `return false` after `fileInput.addEventListener("change", editor);` - this is assuming `myEdit` is called from a click event. Some clarity how these events are setup might help (as would giving them sensible names so we know what you're referring to when you state "add a new preview") – freedomn-m Oct 22 '20 at 08:42
  • Related / worth a read: https://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false – freedomn-m Oct 22 '20 at 08:43
  • You also got no variable "editNo" in your first function but referencing to it. Could you maybe create a sample code (fiddle, stackbliz etc.) for showing us the problem? – Sandro Schaurer Oct 22 '20 at 08:44
  • Or is it the new fileInput "change" event you're trying to exit from? – freedomn-m Oct 22 '20 at 08:45
  • Yes i did exactly, i added "return false" inside myEdit function . Now i added my HTML tags on the post question to explain that situation better.. – korkut Oct 22 '20 at 08:58
  • editNo created when i onclick to edit button – korkut Oct 22 '20 at 08:59

0 Answers0