Input enviar con obligación de campos

[bebodaulerio]

Después de tantos intentos llegué a esto:

<script>
function calcule2(){
var i=0; for (i=0;i<= 3;i++) {calcule();}}
function calcule(){
document.all.resultado.innerText = "La rentabilidad es %"+(((parseFloat(D5.value)/parseFloat(D6.value))*100)+parseFloat(D7.value)) ;
}
</script>

<form>
<p>
Utilidad Neta ($):
<input type="number" id="D5" style="background-color: border:1px; text-align: center;">
</p>
<p>
Capital ($):
<input type="number" id="D6" style="background-color: border:1px; text-align: center;">
</p>
<p>
Extrautilidad ($):
<input type="number" id="D7" style="background-color: border:1px; text-align: center;">
</p>
<p>
<input type="button" onClick="calcule2();" value="Resultado" style="background-color: border:1px; text-align: center;">
</p>
<span id="resultado"></span>
</form>

Y tengo dos preguntas:
1 - ¿Qué es lo que hace "var i=0; for (i=0;i<= 3;i++) {calcule();}}"?
2 - ¿Cómo puedo hacer para que el input button requiera de D5,D6,D7 completos para mostrar el "resultado"? Pongo el required pero envía igual y sale el resultado fallido; y después que los campos están vacíos, además no funciona porque el input no es submit es button.

[xfxstudios]

eso es un bucle y no se porque lo tienes alli, pero prueba asi:

Código HTML:

<form>
<p>
Utilidad Neta ($): 
<input type="number" id="D5" style="background-color: border:1px; text-align: center;">
</p>
<p>
Capital ($): 
<input type="number" id="D6" style="background-color: border:1px; text-align: center;">
</p>
<p>
Extrautilidad ($):
<input type="number" id="D7" style="background-color: border:1px; text-align: center;">
</p>
<p>
<input type="button" onClick="calcule();" value="Resultado" style="background-color: border:1px; text-align: center;">
</p>
<div id="resultado"></div>
</form>
 

Código Javascript:

function calcule(){
var A = document.getElementById('D5').value;
  var B = document.getElementById('D6').value;
  var C = document.getElementById('D7').value;
  
  var D = document.getElementById('resultado');
  
  D.innerHTML = ((parseFloat(A)/parseFloat(B))*100)+parseFloat(C);
  
}
 

Aquí una muestra: https://codepen.io/anon/pen/LGpqpJ

[xfxstudios]

Espero sea lo que buscas. Saludos

[bebodaulerio]

Buenos los cambios sobre todo porque voy mejorando un poco.
Pero el tema es que necesito que al apretar 'Resultado' no muestre nada sin antes haber completado los tres campos (D5,D6,D7). Porque sino muestra: El resultado es: NaN% y es lo que quiero evitar.
O que muestre 'Complete todos los campos' en vez del resultado. Alguna solución para evitar ese NaN.

[bebodaulerio]

o por el contrario, que la fórmula no necesite de todos los campos completos y arroje un número igual.
Es decir, si tengo (A / B) + C. Si C no está completo que la formule arroje el resultado de A/B.

[xfxstudios]

sencillo crea una condición en la formula del script, asi:

Código Javascript:

function calcule(){
  var A = document.getElementById('D5').value;
  var B = document.getElementById('D6').value;
  var C = document.getElementById('D7').value;
  
  var D = document.getElementById('resultado');
  
  if(A == ""){
    D.innerHTML = "Faltan parámetros en el Input A";
  }else if(B==""){
    D.innerHTML = "Faltan parámetros en el input B";
  }else if(C==""){
    D.innerHTML = "La rentabilidad es: " + ((parseFloat(A)/parseFloat(B))*100) + "%";
  }else{ 
  D.innerHTML = "La rentabilidad es: " + (((parseFloat(A)/parseFloat(B))*100)+parseFloat(C)) + "%";
  }
}
 

Muestra: https://codepen.io/anon/pen/LGpqpJ

[bebodaulerio]

Que gran mano me estás dando.
¿Cómo podría hacerse para que los tome todo juntos, es decir, si A, B o C == "" entonces "Complete todos los campos"? Y que por lo tanto no arroje resultado si A, B o C no están completados. Y cuyo caso en el campo C deban poner aunque sea un 0.
Bien podría hacerlos todos por separados, pero hay manera de hacerlos juntos?

[xfxstudios]

de la misma forma que te lo coloque, solo eliminas la formula:

Código Javascript:

function calcule(){
  var A = document.getElementById('D5').value;
  var B = document.getElementById('D6').value;
  var C = document.getElementById('D7').value;
  
  var D = document.getElementById('resultado');
  
  if(A == ""){
    D.innerHTML = "Debe llenar todos los campos";
  }else if(B==""){
    D.innerHTML = "Debe llenar todos los campos";
  }else if(C==""){
   D.innerHTML = "Debe llenar todos los campos";
  }else{ 
  D.innerHTML = "La rentabilidad es: " + (((parseFloat(A)/parseFloat(B))*100)+parseFloat(C)) + "%";
  }
}