prendre l'entrée d'utilisateur à partir d'un Formulaire de calculs (ordre des opérations) et de la sortie arrière sur cette forme

Je suis en train de prendre une entrée à partir d'un élément de la Forme (1) et effectuer un calcul qui serait essentiellement OUTPUT1=((INPUT1/20).58).30
J'ai vu un certain nombre d'exemples pour la conversion de CM en pouces etc.. Mais rien avec l'ordre des opérations. S'il vous plaît aider! Le mur et ma tête ont rencontré trop de temps.
C'est ce que j'ai à ce jour, (qui ne fonctionne pas)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transititonal//EN"
""http://www.w3.org/TR/XHTML1/DTD/xhtml1-transitional.dtd">

<html>
<head></head>
<body>

<form name="TESTING">
<table border="1" width="600" height="200" cellpadding="10" cellspacing="3">
<tr><th colspan="2"><h1>TESTING</h1></th></tr>
<tr>  <th><h3>INPUT</h3></th>
<th><h3>OUTPUT</h3></th>    </tr>
<tr></tr>
<td><input type="number" name="INPUT1"/></td>
<td><input type="number" name="OUTPUT1"></td>
<table>

</form>

<script type="text/javascript">
var USERINPUT1 = document.TESTING.INPUT1.value;
var CALC1 = USERINPUT1/20;
var CALC2 = CALC1*.585;
var CALC3 = CALC2*.30;
var CALC3 = OUTPUT1;

</script>
</body>
</html>

OriginalL'auteur user1635052 | 2012-09-06

javascript xhtml

Vous avez un couple de choses de manière incorrecte.

Tout d'abord, la valeur d'entrée doit être lu à un moment donné. Par exemple, lorsqu'un bouton est enfoncé, lorsque le champ de saisie de la valeur de changements ou de situations similaires. Dans votre cas, il a été lu dès que le document a été analysée, lorsque le champ de saisie n'ont pas une valeur.

Deuxième, vous n'avez pas écrit le résultat dans le champ de sortie.
Cette ligne var CALC3 = OUTPUT1; redeclares la CALC3 variable et lui donne la valeur OUTPUT1. Ce que vous voulez, c'est de définir la valeur du champ OUTPUT1 comme CALC3

Essayez ceci:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transititonal//EN"
""http://www.w3.org/TR/XHTML1/DTD/xhtml1-transitional.dtd">

<html>
<head></head>
<body>

<form name="TESTING">
<table border="1" width="600" height="200" cellpadding="10" cellspacing="3">
<tr><th colspan="2"><h1>TESTING</h1></th></tr>
<tr>  <th><h3>INPUT</h3></th>
<th><h3>OUTPUT</h3></th>    </tr>
<tr></tr>
<td><input type="number" name="INPUT1" id="input" onchange="calculate();"/></td>
<td><input type="number" name="OUTPUT1" id="output"></td>
<table>

</form>

<script type="text/javascript">
function calculate() {

var USERINPUT1 = document.TESTING.INPUT1.value;
var CALC1 = USERINPUT1/20;
var CALC2 = CALC1*.585;
var CALC3 = CALC2*.30;
document.TESTING.OUTPUT1.value = CALC3;

}

</script>
</body>
</html>

Lorsque la valeur du premier champ de saisie de changements, il appelle la fonction calculer() (onchange="calculate();") et ensuite automatiquement les mises à jour de la deuxième zone (vous écrivez la valeur comme vous le lire document.TESTING.OUTPUT1.value = CALC3;).

[modifier]
La première version du code est à peu près comme la vôtre, de sorte que vous serez en mesure de comprendre plus facilement, mais vous devriez aussi jeter un oeil à ce. Vous avez eu du mal placée ligne de la table de balises et de certains désordre, code, donc j'ai aussi nettoyé un peu. C'est encore loin des meilleures pratiques, mais c'est une version améliorée de votre page

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <form name="TESTING">
        <table border="1" width="600" height="200" cellpadding="10" cellspacing="3">
            <tr>
                <th colspan="2">
                    <h1>TESTING</h1>
                </th>
            </tr>
            <tr>  
                <th>
                    <h3>INPUT</h3>
                </th>
                <th>
                    <h3>OUTPUT</h3>
                </th>    
            </tr>
            <tr> 
                <td>
                    <input type="number" name="INPUT1" id="input" onchange="calculate();"/>
                </td>
                <td>
                    <input type="number" name="OUTPUT1" id="output">
                </td>
            </tr>
        </table>
    </form>

<script type="text/javascript">
    function calculate() {
        var USERINPUT1 = document.TESTING.INPUT1.value,
            RESULT = (USERINPUT1/20) * .585 * .30;
        document.TESTING.OUTPUT1.value = RESULT;
    }
</script>
</body>
</html>

OriginalL'auteur BBog

1

Êtes-vous en mesure d'utiliser jQuery?

Si oui, alors il utilise ce que vous avez fournis: http://jsfiddle.net/vuYMs/

Sinon, je peux la modifier pour fonctionner sans jQuery.

EDIT:

Voici un plus en javascript orienté solution: http://jsfiddle.net/vuYMs/3/
```
var input1 = document.getElementsByName("INPUT1")[0];
var output1 = document.getElementsByName("OUTPUT1")[0];

function changeInput(e){ 
    var calc = (((input1.value/20)*0.585)*0.30);
    output1.value = calc;
}

input1.onchange = changeInput;
```
J'ai passé beaucoup de temps à regarder jquery, mais il me semble que je vais vraiment passer un peu de temps pour l'apprendre avant de mettre en œuvre. Je voudrais vraiment obtenir que cela fonctionne en javascript.
Viens de voir votre commentaire et mise à jour de ma réponse avec un plus en javascript orienté répondre sans l'utilisation de jQuery. Si ceci pour une raison quelconque ne fonctionne pas correctement pour vous, ou vous avez besoin de plus d'aide alors laissez-moi savoir. Espérons que cela aide =) ...Et je recommande fortement la recherche en jQuery lorsque vous obtenez une chance. Il est très élégant et puissant.

OriginalL'auteur Chase

Code ci-dessous va construire le nécessaire automatique de la calculatrice.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate(ele)
{
var result = ((ele / 20) * 0.585) * 0.30;
document.getElementById("output1").value = result;
}
</script>
<style type="text/css">
body                    { font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; margin:0; padding:0; }
.container              { background:#0CC; border:1px dotted #bbb; margin:40px auto 0 auto;  padding: 20px; width:500px; }
h1                      { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:bold; text-align:center; text-decoration:underline;  }
input                   { border:1px solid #eee; }
.container p label      { width:100px; float:left; }
p                       { clear:both; }
</style>
</head>
<body>
<form name="testing" method="post" action="">
<div class="container">
<h1> My Calculator</h1>
<p><label>Input : </label><input type="number" name="input1" value="" onBlur="calculate(this.value);"/></p>
<p><label>Output : </label><input type="number" name="output1" id="output1"></p>
</div>
</form>
</body>
</html>

OriginalL'auteur Aratidgr8

Vous devez vous connecter pour publier un commentaire.