Discussion :

[younesssoleil]

Bonjour ( PI: je suis débutant en JS)
Je souhaite en cliquant sur un bouton que j'ai crée via le code ci-dessous ==> créer un bouton qui a comme valeur le texte affiché dans une zone de text 'newevent'
je souhaite que les boutons crées soient déplaçable avec la souris et identifiable avec un ID.
par exemple: si je rentre le mot test1 dans ma zone newevent, et je click sur OK, je crée un bouton qui a comme valeur 'test1' et si je click sur test1
je réalise un événement par exemple incrémenter une valeur dans un tableau.

j'ai essayé plusieurs jours mais sans résultats.
Merci d'avance de votre aide.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<input type="button" onclick="créationbouton()" value="OK"/>
 
<input type="text" name="newevent" id="newevent"/>

[mathieu]

cela peut se faire facilement avec jQuery, par exemple comme cela :
http://api.jquery.com/append/

[MehrezLabidi]

peu de JQuery
pour le depalcement https://jqueryui.com/draggable/
pour l'ajout d'un bouton :http://api.jquery.com/append/

[younesssoleil]

Merci...
Je vais apprendre jQuery..)))
si ce n'est pas trop compliqué et pour que je puisse avancer merci de me fournir le code svp...
Merci de voter aide

[sekaijin]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function creationbouton() {
  var btn =  document.createElement('button'); //créer le bouton
  vart input = document.getElementById('newevent');//récupérer l'input
  btn.setAttribute('name', input .value); //lui donner son nom
  input.parentNode.insertBefore(btn, input.nextSibling);//l'insérer dans le dom où on veut: ici après l'input 
  //(insérer parmi les fils du parent de l'input, avant le suivant de l'input)
}

tout aussi simple en javascript

A+JYT

[younesssoleil]

Merci sekaijin
j'arrive bien à créer les boutons
ils sont tout petits.. comment gérer stp leur dimensions?
Comment les placer un endroit donnée?
et pour terminer...) comment les rendre déplaçable avec la souris?
Merci bcp de votre aide

[younesssoleil]

Pour les dimensions j'ai trouvé..

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

btn.style= "width:60px; height:40px";

[younesssoleil]

Re bonjour

en plus des deux points restants ci-dessous:

Comment les placer à un endroit donnée?
comment les rendre déplaçable avec la souris?

je n'arrive pas à leur donner une valeur ( texte à l’intérieur du bouton)
Merci encore de votre aide.

[younesssoleil]

Pour le pb d'afficher la valeur du bouton .. c'est un bug du navigateur.. ca marche avec IE mais pas avec chrome..bizzard

[sekaijin]

réponse ligne 5 dans le code ci dessus.

A+JYT