Calling a function together with another

Question

Calling a function together with another

Navigation

#1 by (0 votes)

0

Good evening guys I'm having a problem calling a class I want that when the file button is with some file an icon will appear (only to indicate that the button is not empty).

This function only works on the first button, because I have another button to add more fields that calls that 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

asked by anonymous 11.10.2016 / 03:14

1 answer

"Can not GET" while deploying on heroku Problems with Spring Security

score 0 · Accepted Answer

You can not use id of elements input and p because by good practice you should have a id single per element, so you could not get new elements created using getElementById . However you can pass the element itself in the function call, it is easier to reference it.

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

I 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 nextElementSibling function I got from this post here: link It serves to find the next element after the one informed in the parameter.