Récapitulatif des saisies d'une personne HTML/JAVA

19 janvier 2019 à 2:06:09

Bonjour,

J'essaie de comprendre le Javascript depuis quelques jours et donc mes connaissances sont très faible.. c'est pourquoi je demande un peu de votre temps et de votre aide pour m'aider à réaliser ceci :

Imaginons qu'une personne renseigne son prénom, son nom et son age.

Mon but est de faire un récapitulatif des saisies de cette personne dans la div "champ" une fois que l'utilisateur à cliquer sur le bouton "Générer"

  <div class="question1">

      <var="prenom">Votre prénom : </label>
      <input type="text" name="prenom1" id="prenom2">
    </div>
    <div class="question2">
      <var="nom">Votre nom : </label>
      <input type="nom" name="nom1" id="nom2">
    </div>
    <div class="question3">
      <var="formation">Votre age : </label>
      <input type="nom" name="age1" id="age2">
    </div>
    <div class="generer">
      <input type="submit" value="Générer">
    </div>

<div id="champ" style="width:250px;height:100px;border:1px solid #000;"></div>



</html>

J'ai essayer de parvenir a mes fins avec quelques lignes de codes en Javascript mais mes connaissances en Java sont encore plus limité que celles en HTML..

Merci d'avance, bonne soirée

Arthur222

19 janvier 2019 à 9:25:55

Voila un exemple :

<body>
<input type="text" id="bla">
<div id="ddd"></div>
<input type="button" value="generer!" onclick="generer()">

<script>
function generer(){
	var a = document.getElementById("bla");
	var b = document.getElementById("ddd");
	b.innerHTML += a.value;
}
</script>
</body>

Java c’est un langage de programmation différent de Javascript. Aussi quand tu lances ta page web, le navigateur verifie ton code et te donne les erreurs dans la console du navigateur （chrome, firefox etc.）, avec la ligne de l’erreur a droite.

-
Edité par Arthur222 19 janvier 2019 à 9:33:19

Kiemrs

20 janvier 2019 à 14:26:23

Salut !

Merci pour ton aide, j'ai donc réussi à obtenir ce que je voulais hormis un petit détail

J'aimerai que les textes générer (Champ1,2 et 3) ne soit plus générer sous le "input" mais dans le rectangle ci-dessus

<input type="text" id="prenom">
  <div id="1"></div>

  <input type="text" id="nom">
  <div id="2"></div>

  <input type="text" id="formation">
  <div id="3"></div>

  <input type="button" value="Générer" onclick="generer()+generer1()+generer2()">

<div id="champ"
 style="width:250px;height:100px;border:1px solid #000;"></div>


<style>
function generer(){
    var a = document.getElementById("prenom");
    var b = document.getElementById("1");
    b.innerHTML += a.value;
}

function generer1(){
    var c = document.getElementById("nom");
    var d = document.getElementById("2");
    d.innerHTML += c.value;
}

function generer2(){
    var c = document.getElementById("formation");
    var d = document.getElementById("3");
    d.innerHTML += c.value;
}
</style>

Merci encore

Arthur222

20 janvier 2019 à 15:32:40

Tu avais juste à changer l’element avant le innerHTML, et mettre l’element avec l’id champ plutot que les id 1 et 2.

Mais pour mieux faire, voila un exemple, il faut pas repeter de code, pour eviter les changements futures multiples, et bien organiser les fonctions. Il ffaut donc utiliser une fonction comme ça :

function generer(){
	var texte="";
	var tous = document.querySelectorAll("input[type=text]");
	for (var i=0;i<tous.length;i++){
	    texte += tous[i].value+" ";
	}
	document.getElementById("champ").innerHTML=texte;
}

Kiemrs

20 janvier 2019 à 16:17:41

Ah super en effet c'est bien mieux comme ça, merci beaucoup pour votre aide précieuse !