Partage

Calculs et récupération des données

Sujet résolu

Astronomia

1 mai 2016 à 14:27:43

Bonjour,

j'ai cherché des réponses pour mon problème, mais pas trouvé de solution.

Alors voici ce que j'aimerais faire:

- Pouvoir remplir des inputs (de nombres), qui seront sauvegardés et affichés sur la page.

- Calculer le pourcentage de ces nombres dans le code.

- Et afficher le résultat de ce calcul sur une autre page (la racine).

Merci

Mon DeviantArt: http://graph3dungo.deviantart.com/

007julien

1 mai 2016 à 19:25:46

Lire des zones de textes remplies par l'utilisateur : il suffit de faire une boucle pour lire les document.getElementById(id[i]).value à partir des identifiants de ces inputs.

Mais calculer le pourcentage des ces nombres dans le code est incompréhensible !

Astronomia

1 mai 2016 à 20:28:38

Merci pour la réponse.

Quand je dis : "calculer le pourcentage des ces nombres dans le code"

Pour être plus clair: Je vais avoir une liste de mots. A côté de chaque mot, une zone de texte, dans laquelle on pourra écrire un nombre entre 0 et 100. Je voudrais par la suite, faire un calcul de tous ces nombres (pour en faire un pourcentage final). Et je voudrais récupérer le résultat de ce calcul, pour l'importer dans une autre page web (qui sera sur la racine du site).

Mon DeviantArt: http://graph3dungo.deviantart.com/

007julien

1 mai 2016 à 20:50:37

Je ne comprend toujours pas :

Alpha 75

Tango 32

Charlie 24

Qu'entendez-vous par calcul de tous ces nombres pour faire un pourcentage final ?

Astronomia

1 mai 2016 à 21:23:30

Je me suis peut être mal exprimé.

Alpha 75%

Tango 32%

Charlie 24%

En fait c'est une moyenne: (75+32+24)/3 = 43,6%

-----------------------------------------------------------------

En gros:

Sur "page2.html" :

Alpha "input1" %

Tango "input2"%

Charlie "input3"%

'resultat' = (input1 + input2 + input3)/3

-- -- --

Sur "page1.html"

Afficher 'resultat' %

-
Edité par Astronomia 1 mai 2016 à 21:29:31

Mon DeviantArt: http://graph3dungo.deviantart.com/

007julien

2 mai 2016 à 0:07:13

Voici une page qui devrait en partie répondre à la question.

<html>
<html lang="fr">
<head>
	<meta charset="utf-8">
<style>
body {background-color:#ccc;font-size:medium}
div {display:block;width:300px;margin:30px auto;padding:7px;background-color:#fff;}
ul {text-align:center}
input {width:40px;text-align:center}
button {display:block;margin:0 auto;text-align:center}
span {display:inline-block;width:80px;text-align:left}
p{text-align:center}
</style>
</head>
<body>
<div id="pge"><fieldset><legend>Calcul de moyenne</legend>
<ul id="lst"><li><span>Alpha</span><input type="text"> %</li>
	<li><span>Bravo</span><input type="text"> %</li>
	<li><span>Charlie</span><input type="text"> %</li>
	<li><span>Echo </span><input type="text"> %</li>
</ul>
<button onclick="moy()">Calcul de la moyenne</button>
<p id="rsp"></p>
</fieldset></div>
<script type="text/javascript">
function moy(){
	var lms=document.getElementsByTagName('INPUT');// Les i  nputs
	var lng=lms.length;// leutr nombre
	var i,total=0,nbrElm=0,rsp;
	// On ne compte que les valeurs non nulles
	for (i=0;i<lng;i++) if (lms[i].value) {nbrElm++;total+=+lms[i].value}
	if (nbrElm) {rsp=total/nbrElm;
   	document.getElementById('rsp').innerHTML=rsp.toFixed(2)+' %';}
}
</script>
</body>
</html>

Quant à transférer ce résultat sur une autre page, il suffit de terminer la fonction par un

document.location='adresse_de_la_page?'+rsp;

Sur cette page la variable suivante contiendra le résultat (le substr(1) supprime le point d'interrogation et le + devant assure une valeur numérique)

var rsp=+document.location.search.substr(1);

Astronomia

2 mai 2016 à 9:07:45

Merci pour ta réponse !

Alors dans l'ensemble le code fonctionne très bien.

J'ai juste un souci avec :

document.location='mon_nom_de_page.html'+rsp;

Quand je laisse "rsp", il me met que la page est introuvable. Et il m'affiche le rsp dans l'addresse du site (juste après 'mon_nom_de_page.html').

Quand j'enlève "rsp". Je suis redirigé vers l'autre page, mais avec 0 comme résultat.

Et j'aimerais que le résultat soit sauvegardé, sur les deux pages. Et ne pas être redirigé vers l'autre page au moment du calcul. Je ne sais pas si c'est possible :).

En tout cas merci beaucoup, pour ton aide !

Mon DeviantArt: http://graph3dungo.deviantart.com/

007julien

2 mai 2016 à 10:31:29

Il y avait un point d'interrogation à la fin de l'adresse de la page. Il est indispensable pour séparer l'adresse du paramètre !

Maintenant j'ai donné le principe. Peut-être conviendrait-il de prévoir un bouton ou un lien pour passer à l'autre page et puis utiliser le local- storage ou un cookie pour passer cette valeur (Voir ces mots avec des recherches javascript cookies ou local storage)

Astronomia

2 mai 2016 à 13:17:23

Merci beaucoup ! Je vais essayé d'arranger la suite.

Mais au final je me demande si ce ne serait pas plus simple, d'écrire les chiffres directement dans le code et non pas en input. Parce que je crois que je vais galérer à trouver un moyen d'enregistrer les valeurs saisies sur la page.

Et de ne pas mettre de bouton du tout.

---------

Genre:

Page2.html:

Alpha valeur :25 %

Beta valeur :34 %

Faire le calcul des valeurs 34+25/2 = 'resultat'

Envoyer 'resultat' sur page1.html

Page1.html:

Récupérer 'résultat' de la page2.html

Afficher résultat

Mon DeviantArt: http://graph3dungo.deviantart.com/

MiraEld

2 mai 2016 à 15:37:45

Astronomia a écrit:

---

Julien t'as conseiller de passer par un cookie ou le local-storage. Un peu de recherche google et tu as ta solution pour enregistrer tes valeurs

---

007julien a écrit:

-
Edité par MiraEld 2 mai 2016 à 15:38:22

Astronomia

2 mai 2016 à 16:50:10

Oui je vais chercher bien sûr !

Mais mes connaissances dans le domaine sont pour l'instant très limitées. Je suis entrain de lire un cours sur le sujet.

Mais du coup pour l'instant même en cherchant sur internet, je suis un peu perdu.

Mais ca va le faire ! Je finirai par y arriver.

Merci de votre aide en tout cas !

Mon DeviantArt: http://graph3dungo.deviantart.com/

Astronomia

3 mai 2016 à 10:35:44

J'ai essayé deux choses:

document.cookie.getElementsByTagName("input");

Mais ça ne fonctionne pas :\

var input_text= document.getElementsByTagName("input");
localStorage.setItem("input", input_text.value);

Ca ne fait rien non plus...

Ou alors ai-je oublié quelque chose ?

Mon DeviantArt: http://graph3dungo.deviantart.com/

007julien

3 mai 2016 à 10:59:03

Pour les cookies voir par exemple cette page de w3scholls.com (et surtout étudier les exemples modifiables des pages try it yourself).

La méthode document.getElementsBytagName renvoie une collection d'objets (comme le s du mot élément le rappelle aux développeurs attentifs), il faut donc parcourir celle-ci avec une boucle ou sélectionner l'élément qui vous intéresse (avec un document.getElementsBytagName[0] pour un seul input ou le premier dans la page), ou mieux encore, utiliser un identifiant et un getElementById qui renvoie un élément unique !). Voir cette page de w3schools.com pour le local storage

-
Edité par 007julien 3 mai 2016 à 11:01:55

Astronomia

4 mai 2016 à 0:08:53

Merci ! Je vais étudier tout ça !

Je vous tiens au courant

Mon DeviantArt: http://graph3dungo.deviantart.com/

Astronomia

4 mai 2016 à 13:58:04

J'ai réussi à écrire le code pour:

- sauvegarder les inputs, et les charger au lancement de la page

- calculer le pourcentage, le sauvegarder et le charger au lancement de la page

Me manque plus qu'à envoyer le résultat sur l'autre page !!!

<body onload= "load()">
    <div>
        <fieldset><legend>Liste des sous catégories:</legend>
            <ul>
                <li>Alpha<input type="number" min="0" max="100" step="1" id="textfield" />
                <li>Beta<input type="number" min="0" max="100" step="1" id="textfield2" /></li>
                <input type="button" value="Calculer et sauvegarder" onclick="save()" />
            </ul>
            <p id="resultat"></p>
        </fieldset>
    </div>

<script type="text/javascript">

//----------------------------------------------------------sauvegarde des données saisies-----------------------------------------------------------------//
function save() {

    var fieldValue = document.getElementById('textfield').value;
    localStorage.setItem('text3', fieldValue);
    fieldValue = parseInt(fieldValue);

    var fieldValue2 = document.getElementById('textfield2').value;
    localStorage.setItem('text4', fieldValue2);
    fieldValue2 = parseInt(fieldValue2);

//---------------------------------------------------------Calcul et sauvegarde des données-----------------------------------------------------------------//
    var rsp = document.getElementById("resultat").innerHTML = ((fieldValue + fieldValue2)/2);
    var fieldValue3 = rsp;
    localStorage.setItem('text5', fieldValue3);
    fieldValue3 = parseInt(fieldValue3);

}

//--------------------------------------------------------Chargement des données précédemment saisies-------------------------------------------------------//
function load() {

    var storedValue = localStorage.getItem('text3');
    if(storedValue) {
        document.getElementById('textfield').value = storedValue;
    }

    var storedValue2 = localStorage.getItem('text4');
    if(storedValue2) {
        document.getElementById('textfield2').value = storedValue2;       
    }

//------------------------------------------------------------Chargement du résultat sauvegardé-------------------------------------------------------//
      var storedValue3 = localStorage.getItem('text5');
    if(storedValue3) {
        document.getElementById('resultat').innerHTML = storedValue3;       
    }

}
</script>
</body>

Mon DeviantArt: http://graph3dungo.deviantart.com/

Astronomia

5 mai 2016 à 11:43:02

Ca y'est !

J'ai réussi à envoyer les données sur l'autre page et à les sauvegarder tout le temps :). Et quand on change les données sur la page avec les inputs, ça change automatiquement le résultat sur l'autre page, et enregistre données saisies et résultats :).

Merci de votre aide !

Ce sujet est résolu !

Mon DeviantArt: http://graph3dungo.deviantart.com/