Entonces, trato de mostrar la división/sección oculta después de que el usuario cargue el archivo necesario (en este caso, 3 archivos), pero ¿dónde necesito usar javascript onchange? aquí el mío hasta ahora
html
<body onload="rgbOrMulti()"> <div style="padding: 14px 16px;"> <form action="/action_page.php"> <p>Red tif</p> <input type="file" name="RedBand" accept=".tif" id="redBand" onchange="rgbOrMulti()"> </form> <form action="/action_page.php"> <p>Green tif</p> <input type="file" name="GreenBand" accept=".tif" id="greenBand" onchange="rgbOrMulti()"> </form> <form action="/action_page.php"> <p>Blue tif</p> <input type="file" name="BlueBand" accept=".tif" id="blueBand" onchange="rgbOrMulti()"> </div> <div id="rgbDiv"> <form action="/action_page.php"> <p>Red tif</p> <input type="text" name="filename" accept=".tif"> </form> <form action="/action_page.php"> <p>Green tif</p> <input type="text" name="filename" accept=".tif"> </form> <form action="/action_page.php"> <p>Blue tif</p> <input type="text" name="filename" accept=".tif"> </div> </body>javascript
function rgbOrMulti() { if (document.getElementById('redBand').files.length != 0 && getElementById('greenBand').files.length != 0 && getElementById('blueBand').files.length != 0) { alert(blueBand.value); document.getElementById('rgbDiv').style.visibility = 'visible'; document.getElementById('multiDiv').style.visibility = 'hidden'; } else if(document.getElementById('redtif').files.length != 0 && document.getElementById('greentif').files.length != 0 && document.getElementById('bluetif').files.length != 0) { document.getElementById('multiDiv').style.visibility = 'visible'; document.getElementById('rgbDiv').style.visibility = 'hidden'; } else{ // none file insert } }¿Cómo cambio la división rgbDiv para que sea visible correctamente?
Intenta configurar la visibilidad de estos elementos para que sean visibles con JavaScript, pero su css aún los oculta con display: none.
Elimina tu css o cambia la propiedad de visualización en lugar de la visibilidad