Probleme script de creation d'un input

Signaler
Messages postés
7
Date d'inscription
jeudi 12 février 2009
Statut
Membre
Dernière intervention
8 juin 2009
-
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
-
voila le problème que je rencontre avec ce script :
 si je clique sur le bouton normalement un input doit être crée mais ce n'est pas le cas.
Mais si je change le type de mon input par exemple boutton je clique et ce crée vraiment vous pouvez tester .
Merci de m'aider à créer ce input de saisie qu'on je clique sur le bouton :
 <html>
 <head>
 <title>Gecko DOM insertBefore test</title>
 </head>
 
 
 

 
 

 <script type="text/javascript">
 function f(){
 // create an empty element node
 // without an ID, any attributes, or any content
 var sp1 = document.createElement("button");

 // give it an id attribute called 'newSpan'
 sp1.setAttribute("id", "newInput");
 // create some content for the newly created element.
 var sp1_content = document.createTextNode("This is a new input element. ");

 // apply that content to the new element
 sp1.appendChild(sp1_content);

 var sp2 = document.getElementById("input1");
 var parentDiv = sp2.parentNode;

 // insert the new element into the DOM before sp2
 parentDiv.insertBefore(sp1, sp2);
 }
 </script>
 
 </html>
 

7 réponses

Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
9
bonjour,
tu te compliques pas un peu la vie ?
si tu veux ajouter un bouton dans le div :








function f()
{ var sp1 = document.createElement("button");
sp1.innerHTML="exemple";
document.getElementById("toto").appendChild(sp1);
}

et si tu veux
y mettre un id
sp1.id="id du bouton qui doit être unique dans une page";
une fonction au onclick
sp1.onclick=function() { .... }
....

@+
Messages postés
7
Date d'inscription
jeudi 12 février 2009
Statut
Membre
Dernière intervention
8 juin 2009

Voila ce que vous avez dit mais qu'on je clique sur le button le nouveau input ne s'affiche pas:pouvez vous m'aider encore plus ?:
<html>

<script language="text/javascript">
function f()
{
var sp1 = document.createElement("input");
sp1.innerHTML="exemple";
document.getElementById("toto").appendChild(sp1);
}
</script>

</html>
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
9
1° <script language="text/javascript">
eh non ! : <script type="text/javascript">
2° un input n'a pas d'innerHTML !
var sp1 = document.createElement("input");
sp1.value="exemple";
@+
Messages postés
7
Date d'inscription
jeudi 12 février 2009
Statut
Membre
Dernière intervention
8 juin 2009

Merci bien le problème mtn est résolu,l'input s'affiche correctement :
Mais je veux encore faire plus par exemle au lieu de cliquer sur le boutton pour déclencher l'événement de la création .Je veux créer un sélect avec par exemple les valeurs 1,2,3 .. qu'on je selectionne 2 .deux input doit etre crees .3 trois doit etre crees ...etc si vous avez une idee n'esitez pas. 
Messages postés
7
Date d'inscription
jeudi 12 février 2009
Statut
Membre
Dernière intervention
8 juin 2009

Voila par exemple mais il me reste un petit probleme C.A.D si je veux revenir en arriere via la suppression des inputs criees comment faire?
<html>

<select id="slt1"  onChange="f()">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

<script type="text/javascript">
function f()
{
var v=document.getElementById("slt1").value;
if(v==2)
for(i=1;i<=2;i++){
var sp1 = document.createElement("input");
sp1.id="newInpt";
document.getElementById("toto").appendChild(sp1);
}
else if(v==3)
for(i=1;i<=3;i++){
var sp1 = document.createElement("input");
sp1.id="newInpt";
document.getElementById("toto").appendChild(sp1);
}
}
</script>

</html>
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
9
créer un select ?
var sp1 = document.createElement("select");
   créer les option avec create new option
   ou avec le select.length++
              le select.options[le select.length-1].text="?" et/ou .value="?"
   ou ...
puis appendChild du select
comme pour tout quoi.
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
9
>>suppression des inputs créés
exemple ici
sinon removeChild ou autre ( explications sur selfHTML )