Une méthode (prototype) d'un objet javascript défini par l'utilisateur peut-elle utiliser le document.createElement?

J'essaie de connaître les objets définis par l'utilisateur en JavaScript. Spécifiquement, j'essaye de créer une méthode d'un objet défini par l'utilisateur qui utilisera le document.getElementById("holder") et l'ajoutera en utilisant document.createElement('p') et lui ajouterai un noeud de texte avec document.createTextNode("text").Une méthode (prototype) d'un objet javascript défini par l'utilisateur peut-elle utiliser le document.createElement?

Actuellement, ma méthode ne le fait pas. J'ai testé la méthode et elle est appelée, mais rien n'apparaît dans la page du item.appendChild(otheritem). J'ai regardé d'autres articles, mais aucun n'a expliqué ma situation, du moins à ce que je sache. Mon code est ci-dessous.

<html> 
    <head> 
     <title></title> 
     <script type="text/javascript"> 
      function Person(fn, ln) { 
       this.fname = fn; 
       this.lname = ln; 
      } 
      Person.prototype.getFullName = function() { 
       var myPara = document.createElement('p'); 
       var strFullName = document.createTextNode("super"); 
       myPara.appendChild(strFullName); 
       var objHolder = document.getElementById("objHolder"); 
       objHolder.appendChild(myPara); 
      }; 

      function getSome() { 
       var fN = document.getElementById("fname").value; 
       var lN = document.getElementById("lname").value; 
       var Myperson = new Person(fN, lN); 
       alert(Myperson.fname); 
       Myperson.getFullName(); 
      } 
     </script> 
    </head> 
    <body> 
     <form id="holder">First Name: 
      <input id="fname" type="text" width="40" />Last Name: 
      <input id="lname" type="text" width="40" /> 
      <button id="buildObj" value="Click" onClick="getSome()">Click</button> 
     </form> 
     <div id="objHolder"></div> 
    </body> 
</html>

Toute aide ou recommandations seraient appréciés. Aussi, s'il me manque un concept clé, sachant que ce serait bien aussi.

Merci, Mike

Source

2012-10-31 M_66

Pourquoi est-il nommé getFullName quand il ne renvoie rien et a des effets secondaires? vous devriez le renommer en quelque chose de approprié, par ex. createNameElem –

Pour répondre à la question de votre titre: Oui, bien sûr que oui. Pourquoi pas? – Bergi

Les travaux append, mais en même temps l'envoi du formulaire, de sorte qu'il redirige vers une autre page. Vous devez annuler le comportement naturel du navigateur en envoyant le formulaire via return false dans un gestionnaire d'événement pour l'événement submit.

<!DOCTYPE html> 
<html> 
<head> 
<title> 
</title> 
<script type="text/javascript"> 
function Person(fn,ln) { 
this.fname = fn; 
this.lname = ln; 
} 

Person.prototype.getFullName = function() 
{ 

var myPara = document.createElement('p'); 
var strFullName = document.createTextNode("super");myPara.appendChild(strFullName); 
var objHolder = document.getElementById("objHolder");objHolder.appendChild(myPara); 
}; 

function getSome(){ 
var fN = document.getElementById("fname").value; 
var lN = document.getElementById("lname").value; 

var Myperson = new Person(fN,lN); 
alert(Myperson.fname); 
Myperson.getFullName(); 
} 
</script> 
</head> 
<body> 
<form id="holder"> 
First Name: <input id="fname" type="text" width="40" /> 
Last Name: <input id="lname" type="text" width="40" /> 
<button id="buildObj" value="Click" onClick="getSome()">Click</button> 
</form> 
<div id="objHolder"> 
</div> 
<script> 
document.getElementById('holder').onsubmit=function(){ return false; } 
</script> 
</body> 
</html>

La méthode la plus élégante est d'utiliser l'objet event puis appelez event.preventDefault mais en raison des incohérences navigateur prend beaucoup de code pour y arriver .. donc pour cet exemple de base, onsubmit et return false devrait suffire.

Source

2012-10-31 19:18:10

Merci! C'était ce que je cherchais. Je n'ai pas réalisé qu'il essayait d'aller à une autre page. J'ai encore beaucoup d'apprentissage à faire. Merci encore! –

Une méthode (prototype) d'un objet javascript défini par l'utilisateur peut-elle utiliser le document.createElement?

Répondre

Questions connexes