2017-10-17 2 views
0

comment créer un objet avec l'entrée utilisateur javascript

window.onload = Soldier; 
 

 
function Soldier(allegiance,armor,weapon){ 
 
    this.allegiance = allegiance; 
 
    this.armor = armor; 
 
    this.weapon = weapon; 
 
} 
 
document.getElementById("soldier").innerHTML = 
 

 
var soldier1 = new Soldier("Theosis", true, "Sword"); 
 
alert(soldier1.allegiance);
<DOCTYPE HTML> 
 

 
<html> 
 
<head> 
 
    <script src = "objscript.js"> </script> 
 
</head> 
 
<body> 
 
    Allegiance: <input type ="text" id = "allegiance"><br/><br/> 
 
    Armor: <input type ="text" id = "armor"><br/><br/> 
 
    Weapon(s): <input type ="text" id = "weapon"><br/><br/> 
 
    <input type = "button" id="button" value = "Submit"><br/> 
 
    <p id = "soldier"> </p> 
 
</body> 
 
</html>

je sais comment faire des objets, mais je ne sais pas comment faire l'entrée de l'utilisateur les données de l'objet et imprimer sur l'écran.

+0

Quand invitez-vous l'utilisateur à entrer son entrée? Vous semblez utiliser les boîtes standard '', mais vous tentez de définir 'Soldier' au chargement de la page (avant que l'utilisateur n'ait pu entrer des valeurs). Serait-il approprié d'assigner à l'objet en cliquant sur un bouton? Ou cherchez-vous à stocker cette information dans un «COOKIE» ou similaire? –

Répondre

0

La solution:

HTML

Allegiance: <input type ="text" id = "allegiance"><br/><br/> 
Armor: <input type ="text" id = "armor"><br/><br/> 
Weapon(s): <input type ="text" id = "weapon"><br/><br/> 
<input type = "button" id="button" onclick="hire()" value = "Submit"><br/> 
<p id="output"></p> 

JS

var soldiers = []; 

function Soldier(allegiance, armor, weapon){ 
    this.allegiance = allegiance; 
    this.armor = armor; 
    this.weapon = weapon; 
    this.doReport = function() { 
    return this.armor + ' and ' + this.weapon; 
    } 
} 

function doReport() { 
    output = ""; 
    for(var i = 0; i < soldiers.length; i++) { 
     output += (i + 1) + ") " + soldiers[i].doReport() + "; "; 
    } 
    document.getElementById("output").innerHTML = output; 
} 

function hire() { 
    var soldier = new Soldier(
    document.getElementById("allegiance").value, 
    document.getElementById("armor").value, 
    document.getElementById("weapon").value 
); 
    soldiers.push(soldier); 
    doReport(); 
} 

I a ajouté la fonction hire() et la banda avec bouton d'envoi. Un nouvel objet soldier est poussé dans la liste soldiers. Aussi j'ai ajouté doReport() méthode à Soldier et la fonction commune doReport() qui fait un rapport général de tous les soldats dans la liste. En ce moment, j'appelle doReport() à la fin de chaque hire(), mais vous pouvez le faire en cliquant sur un autre bouton par exemple.

+0

J'ai essayé de faire vos js et rien ne s'imprime –

+0

@BrandonBell Ouvrez une console de navigateur, je la sortie via 'console.log'. Il n'y a pas de code pour la sortie en html. BTW, je peux l'ajouter ... – dhilt

+0

o ok. C'est exactement ce dont j'ai besoin. et puis j'ai besoin d'un autre bouton pour imprimer les soldats en même temps sur la page. comment ferais-je ça? –

0

window.onload = submit; 
 
function Soldier(allegiance,armor,weapon){ 
 
this.allegiance = "allegiance"; 
 
this.armor = armor; 
 
this.weapon = weapon; 
 

 

 
var soldier1 = document.getElementById("atext").value; 
 

 
document.getElementById("soldier").innerHTML = " allegiance: " + soldier.allegiance + " <br/> " + " armor: " + soldier.armor + "</br>" + "Weapon(s): "+ soldier.weapon; 
 
} 
 

 
function submit(){ 
 
\t var submitButton = document.getElementById("button"); 
 
\t submitButton.onclick = Soldier; 
 
}
<DOCTYPE HTML> 
 

 
<html> 
 
<head> 
 
<script src = "objscript.js"> </script> 
 
</head> 
 

 
<body> 
 
Allegiance: <input type ="text" id = "atext"><br/><br/> 
 
Armor: <input type ="text" id = "armor"><br/><br/> 
 
Weapon(s): <input type ="text" id = "weapon"><br/><br/> 
 
<input type = "button" id="button" value = "Submit"><br/> 
 
<p id = "soldier"> </p> 
 

 
</body> 
 
</html>

Je ne pense pas im autorisé à utiliser pousser. Im juste supposer faire de nouveaux soldats par l'utilisateur en tapant dedans. J'ai fait le code un peu mieux. maintenant juste besoin d'imprimer réellement