Répétition de fonction

Version imprimable

Bonjour à tous,

Je débute en JS, je voudrais faire une page html qui permet de tracer des courbes mathématiques.

Jusque là pas de problème on trouve plein de chose.

Ce que souhaites c'est rajouter un autre bouton qui permet de rajouter une input pour qu'un utilisateur puisse choisir une autre fonction à tracer.

Exemple : Si l'utilisateur clique une première fois sur le bouton, alors il peut tracer une deuxième fonction. Si l'utilisateur clique une deuxième fois sur le bouton, alors l'utilisateur peut tracer une troisième fonction... etc.

Je pense qu'il faut implémenter ma fonction plot mais je ne sais pas comment faire.

Pouvez vous m'aider?

Merci

Mon HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
 
<html lang="en">
 
<head>
	<meta charset="utf-8" />
	<title>7_interactive_plotter</title>
 
	<link rel="stylesheet" href="7_interactive_plotter.css">
 
	<script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://mauriciopoppe.github.io/function-plot/js/function-plot.js"></script>
 
	<script src="7_interactive_plotter.js"></script>
 
</head>
 
<body onload="plot();">
  <h1>Traceur interactif</h1>
 
 
<div class="layer">
 
<section id="plotSettings">
 
	<p> <b> Configuration des axes </b> </p>
	<p></p>
 
    <label for="xMin"> Valeur Mini de X: </label> <input type=number id="xMin" value=-5 step=0.5 oninput="plot();">
    <p></p>
 
    <label for="xMax">Valeur Maxi de X: </label> <input type=number id="xMax" value=5 step=0.5 oninput="plot();">
    <p></p>
 
    <label for="yMin">Valeur Mini de Y:  </label> <input type=number id="yMin" value=-5 step=0.5 oninput="plot();">
    <p></p>
 
    <label for="yMax">Valeur Maxi de Y: </label> <input type=number id="yMax" value=5 step=0.5 oninput="plot();">
    <p></p>
 
    <label for="color">Couleur de la fonction à dessiner: </label> <input type=color id="color" value=#bb0b0b onchange="plot();">
    <p></p>
 
    <label for="function">Fonction à dessiner: </label> <input id="function" type="text" value="sin(x)" onchange="plot();">
    <p></p>
 
	<button onclick="plot();">Dessiner</button>
 
</section>
 
<section id="plot">
    <div id="myFunction"></div>
 
</section>
</div>
 
<footer>
 
<a href="7_support.html">Retour au rapport du workspace 7</a>
 
</footer>
 
</body>
 
</html>

Mon JS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// fonction à tracer
 
var parameters = {
  target: '#myFunction',
  data: [{
    fn: 'sin(x)', 
    color: 'red'
  }],
  grid: true,
  yAxis: {domain: [-1, 1]},
  xAxis: {domain: [0, 2*Math.PI]}
};
 
function plot() {
  var f = document.querySelector("#function").value;
  var xMin = document.querySelector("#xMin").value;
  var xMax = document.querySelector("#xMax").value;
  var yMin = document.querySelector("#yMin").value;
  var yMax = document.querySelector("#yMax").value;
  var color = document.querySelector("#color").value;
 
  parameters.data[0].fn = f;
  parameters.xAxis.domain = [xMin, xMax];
  parameters.yAxis.domain = [yMin, yMax];
  parameters.data[0].color = color;
 
  functionPlot(parameters);
}

et le CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
h1{
  	text-align: center;
	color: sienna;
	text-shadow: -2px 2px 2px black;
}
.layer{
  width: 70%;
  margin-right: auto;
  margin-left: auto;
}
 
section {
  border:4px solid grey;
  border-radius:15px;
  box-shadow: 5px 5px 5px grey;
  float:left;
  height:400px;
  padding: 20px;
  margin:10px;
}
 
#plotSettings {
  width:160px;
}
 
#plot {
  width:550px;
}

26/03/2020, 18h56
Beginner.

Salut,

Citation:

Envoyé par missty95

Jusque là pas de problème on trouve plein de chose.

Ah ben justement j'ai ouvert ce fil : Tracer des courbes...

Citation:

Ce que souhaites c'est rajouter un autre bouton qui permet de rajouter une input pour qu'un utilisateur puisse choisir une autre fonction à tracer.

Oui j'ai déjà vu ça mais avant est-ce que tu es sûr que ton code actuel fonctionne bien ?

J'ai testé (c'est joli) ici : https://jsbin.com/zekayonaba/edit?output mais ça n'a pas l'air de fonctionner correctement quand je met la fonction sin(x)/x ?
26/03/2020, 19h00
missty95

Salut, je ne sais pas quelle fonction tu veux faire mais tu peux essayer (sin(x))/x
26/03/2020, 21h11
Beginner.

Non plus mais bon je vais regarder le code source...

Citation:

Envoyé par missty95

Ce que souhaites c'est rajouter un autre bouton qui permet de rajouter une input pour qu'un utilisateur puisse choisir une autre fonction à tracer.

Exemple : Si l'utilisateur clique une première fois sur le bouton, alors il peut tracer une deuxième fonction. Si l'utilisateur clique une deuxième fois sur le bouton, alors l'utilisateur peut tracer une troisième fonction... etc.

Tu veux dire si il clique sur le bouton "dessiner" tu veux qu'apparaisse un autre input ?

Cela me semble étrange, ne serait-il pas mieux d'ajouter un bouton "ajouter" pour ajouter un input ?

Et ensuite tu veux que toutes les courbes soient affichées si il clique sur le bouton "dessiner" ?
27/03/2020, 10h23
missty95

Je me suis mal expliquer effectivement,

Je souhaite un bouton supplémentaire "rajouter fonction à dessiner"

Un input apparait "la fonction à rajouter" et un bouton pour valider.

Les courbes supplémentaire sont tracée dans le même graphique.

Je pense que c'est se que tu proposais.
27/03/2020, 17h08
Beginner.

Oui je pensais à peu prés à ça sauf pour le "bouton pour valider", je me disais qu'on avait déjà le bouton "Dessiner"...

Sinon je me suis rendu compte d'une autre chose : la couleur, là il n'y a qu'une input (type color) mais comment tu comptes faire si il y a plusieurs courbes ?
27/03/2020, 17h12
missty95

J'y ai pensé soit :
- je met une couleur aléatoire aux autre courbes
- soit je rajoute un input couleur pour les courbes suivantes
27/03/2020, 20h48
Beginner.

Salut,

J'ai fait ce code teste : https://jsbin.com/nilonefite/edit?output

A toi de voir pour la présentation HTML/CSS car c'est juste un exemple pour le JS...

Les couleurs sont dans un tableau de 4 couleurs après la quatrième couleurs on revient à la première...
Là j'ai gardé le premier input type color mais ce serait plus logique de l'enlever ou d'en ajouter un pour chaque courbe...

Bonsoir, c'est super.

Je vais pas en rester là, maintenant il faut que je pige, donc je vais regarder ton code de plus prêt.

Je débute et pour l'instant j'arrive à comprendre ou décoder et modifier.
Mais partir d'un feuille blanche ou trouver des astuce me prennent un temps fou.

Je me fais des petit script mais c'est galère.

Par exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
 
<button onclick="maFonction()">Bouton</button>
 
<button onclick="maFonction2()">Bouton</button>
 
<div id="maDIV" style="display:none;">
Contenu de la balise DIV à afficher ou à cacher
</div>
 
<div id="maDIV2" style="display:none;">
<button onclick="test()">Bouton</button>
</div>
 
<script>
function maFonction() {
  var div = document.getElementById("maDIV");
  if (div.style.display === "none") {
    div.style.display = "block";
  } else {
    div.style.display = "none";
  }
}
 
function maFonction2() {
  var div = document.getElementById("maDIV2");
  if (div.style.display === "none") {
    div.style.display = "block";
  } else {
    div.style.display = "none";
  }
}
 
</script>
</body>
</html>

Bref à force de tâtonner je vais peut être y arriver.

Merci pour ton aide.

27/03/2020, 22h08
Beginner.

Ce qui est bien avec JS c'est que tu peux t'entrainer autant que tu veux...
Et ce n'est pas les cours/tuto et les choses à tester qui manquent...

Et si on bloque sur un point il y a le forum...
27/03/2020, 22h17
missty95

Tu as entièrement raison,

Je décortique ton code et je pense que j'en ai pour un petit moment.
J'ai bien compris ton code pour le changement de couleur. ;)

Par contre pas encore pour le rajout des courbes mais je creuse :aie:
28/03/2020, 00h39
Beginner.

Salut,

Voici une version corrigée et un peu simplifié : https://jsbin.com/ciqajaxoyi/edit?js,output

J'ai corrigé un point : xMin, xMax, yMin et yMax doivent être des nombres or quand on fait ceci var xMin = document.querySelector("#xMin").value; eh bien xMin est une string et non un nombre car la propriété value de l'input est une string, il faut donc la convertir en nombre ce qui peut se faire par exemple en ajoutant un + devant : var xMin = +document.querySelector("#xMin").value;...

Un peu simplifié car j'ai supprimé la gestion des couleurs et ce parce que j'ai vu que la lib gère les couleurs, si on ne précise rien eh bien une couleur différente est choisie automatiquement...

PS : Pour analyser un code JS les outils du navigateur (touche F12) sont très utiles, on peut mettre des points d’arrêt, exécuter le code pas à pas...

On peut aussi utiliser la fonction console.log pour afficher des données dans la console...
Par exemple en mettre une dans la boucle for pourrait être très utile...