How to call one function together with another

Asked

Viewed 101 times

0

Good evening guys I’m having a problem to call a class i want when the file button is with some file an icon appears (so to indicate that the button is not empty).

This function only works on the first button as I have another button to add more fields that calls this file button again. 

<html>

<body onload="myFunction()">

<input type="file" id="myFile" multiple size="50" onchange="myFunction()">

<p id="demo"></p>

<br>

<br><button onclick="myFunction2()"> mais campos </button>      
<script>
function myFunction(){
    var x = document.getElementById("myFile");
    var txt = "<img src='ok.png'>"
   
    if ('files' in x) {
        if (x.files.length == 0) {
            txt = "Selecione um arquivo.";
        } else {
            for (var i = 0; i < x.files.length; i++) {
                txt += "<br><strong>" + (i+1) + ". file</strong><br>";
                var file = x.files[i];
                if ('name' in file) {
                    txt += "name: " + file.name + "<br>";
                }
                if ('size' in file) {
                    txt += "size: " + file.size + " bytes <br>";
                }
            }
        }
    }
    

    document.getElementById("demo").innerHTML = txt;
}

function myFunction2() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "file");
    document.body.appendChild(x);
    
}

</script>

</body>
</html>

javascript function

1 answer

0


You may not use the id of the elements input and p because by good practices you should have a id unique per element, so you couldn’t get the new elements created using the getElementById. However you can pass the element itself in the function call, then it is easier to refer to it.

In the creation of the new file element you also did not create the new tag p that will save the image and information about it.

I’ve made some changes that I believe are your goal:

// Encontra o próximo elemento
function nextElementSibling(element) {
    do {
        element = element.nextSibling;
    } while (element && element.nodeType !== 1);
    return element;
}

function myFunction(el) {
  var txt = "<img src='ok.png'>"

  if ('files' in el) {
    if (el.files.length == 0) {
      txt = "Selecione um arquivo.";
    } else {
      for (var i = 0; i < el.files.length; i++) {
        txt += "<br><strong>" + (i + 1) + ". file</strong><br>";
        var file = el.files[i];
        if ('name' in file) {
          txt += "name: " + file.name + "<br>";
        }
        if ('size' in file) {
          txt += "size: " + file.size + " bytes <br>";
        }
      }
    }
  }
  nextElementSibling(el).innerHTML = txt;
}

function addField() {
	var container =  document.getElementById("fileFields");
  var element = document.createElement("INPUT");
  element.setAttribute("type", "file");
  element.setAttribute("onchange", "myFunction(this)");
  container.appendChild(element);
  
  element = document.createElement("p");
  container.appendChild(element);
}
<fieldset id="fileFields">
<legend>Arquivos</legend>
  <input type="file" multiple="true" size="50" onchange="myFunction(this)">
  <p></p>
</fieldset>
<button onclick="addField()">mais campos</button>

The function nextElementSibling i took this post here: https://stackoverflow.com/questions/14197675/native-javascript-alternative-for-jquerys-next Serves to locate the next element after the entered in the parameter.

  • Thanks Marco was just what I wanted to do worked right

Browser other questions tagged javascript function

You are not signed in. Login or sign up in order to post.