onChange ne fonctionne pas dans ma fonction onLoad pour afficher les bonnes réponses

J'ai fait un document html en calculant la superficie et le volume de tout ce qui est entré dans les zones de saisie dans mon document html de hauteur, largeur et longueur. Au lieu d'utiliser un bouton pour exécuter les fonctions et faire apparaître les réponses dans les zones de saisie Surface et Volume pour les réponses, je voulais utiliser un onload et le faire chaque fois que chaque case d'entrée est changée. Je suis assez nouveau à Javascript et la méthode que j'ai essayée ci-dessous laisse simplement l'écran vide, ce qui cause exactement les réponses à ne pas afficher dans les zones de texte? Comment pourrais-je résoudre ceci?onChange ne fonctionne pas dans ma fonction onLoad pour afficher les bonnes réponses

<!doctype html> 

<html> 
<head> 
<meta charset="utf-8"> 
<title>Surface Area &amp; Volume</title> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
</head> 

<body> 
<script> 
"use strict"; 


    var $ = function(id) { 
     return document.getElementById(id); 
    }; 

    var amountVolume = 0; 

    var length = $("length"); 
    var width = $("widthData"); 
    var height = $("heightData"); 
    var surfaceArea; 
    var surfaceAreaArray = []; 

    function output() { 

    function calculateVolume(length, width, height) { 
     amountVolume = parseFloat(length) * parseFloat(width) * parseFloat(height); 
     var volumeRound = amountVolume.toFixed(2); 
     $('volume').value = volumeRound; 
    } 

    function calculateSurfaceArea(length, width, height) { 
     surfaceAreaArray[0] = parseFloat(length) * parseFloat(width) * 2; 
     surfaceAreaArray[1] = parseFloat(length) * parseFloat(height) * 2; 
     surfaceAreaArray[2] = parseFloat(height) * parseFloat(width) * 2; 
     surfaceArea = surfaceAreaArray[0] + surfaceAreaArray[1] + surfaceAreaArray[2]; 
     var areaRound = surfaceArea.toFixed(1); 
     $('area').value = areaRound; 
    } 

    } 
window.onload = function() { 

    $("length").onchange = output; 

    $("widthData").onchange = output; 

    $("heightData").onchange = output; 
} 



</script> 
<div id="wrapper"> 
    <form> 
    <h1>Surface Area & Volume</h1> 

    <p>Length: 

    <input type="text" id="length" value="0"/> 

    </p> 
    <br /> 
    <p>Width: 

     <input type="text" id="widthData" value="0"/> 

    </p> 
    <br /> 
    <p>Height: 

     <input type="text" id="heightData" value="0"/> 

    </p> 
    <br /> 
    <p class="change">Surface Area: 

     <input type="text" id="area" disabled="disabled" /> 
    </p> 
    <br /> 
    <p class="volume">Volume: 

     <input type="text" id="volume" disabled="disabled" /> 
    </p> 
    <br /> 
    </form> 
    </div> 
</body> 
</html>

Source

2017-10-15 conner.maxey

Tout d'abord, output ne demande pas en fait calculateVolume ou calculateSurfaceArea. C'est juste de les définir. Donc, chaque fois que vous changez votre entrée, vous redéfinissez simplement certaines fonctions et ne faites rien fonctionner.

Deuxièmement, vous devez transmettre les valeurs des entrées dans ces fonctions. var length = $("length"); obtient l'élément entier. Il devrait devenir var length = $("length").value; pour obtenir les valeurs numériques réelles.

Enfin, vous pouvez appeler output() une fois dans onload pour démarrer les champs de surface et de volume au large à 0.

Ce code devrait fonctionner:

var $ = function(id) { 
    return document.getElementById(id); 
}; 

function calculateVolume(length, width, height) { 
    var amountVolume = parseFloat(length) * parseFloat(width) * parseFloat(height); 
    var volumeRound = amountVolume.toFixed(2); 
    $('volume').value = volumeRound; 
} 

function calculateSurfaceArea(length, width, height) { 
    var surfaceAreaArray = []; 
    surfaceAreaArray[0] = parseFloat(length) * parseFloat(width) * 2; 
    surfaceAreaArray[1] = parseFloat(length) * parseFloat(height) * 2; 
    surfaceAreaArray[2] = parseFloat(height) * parseFloat(width) * 2; 
    var surfaceArea = surfaceAreaArray[0] + surfaceAreaArray[1] + surfaceAreaArray[2]; 
    var areaRound = surfaceArea.toFixed(1); 
    $('area').value = areaRound; 
} 

function output() { 
    var length = $("length").value; 
    var width = $("widthData").value; 
    var height = $("heightData").value; 

    calculateVolume(length, width, height) 
    calculateSurfaceArea(length, width, height) 

} 
window.onload = function() { 

    $("length").onchange = output; 

    $("widthData").onchange = output; 

    $("heightData").onchange = output; 

    output(); 
}

Vous dites que vous êtes nouveau JavaScript. Vous devriez passer par le code ci-dessus pour vous assurer que vous comprenez pourquoi cela fonctionne. Voici une bonne introduction aux fonctions que vous pouvez trouver utiles: http://eloquentjavascript.net/03_functions.html

Source

2017-10-15 21:47:18 tfogo

onChange ne fonctionne pas dans ma fonction onLoad pour afficher les bonnes réponses

Répondre

Questions connexes