如何创建与用户输入对象中的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>

我知道如何创建一个对象，但我不知道如何使用户输入对象的数据，并打印到屏幕上。

来源

2017-10-17 Brandon Bell

你什么时候提示用户输入他们的输入？您似乎正在使用标准的''盒子，但正尝试在页面加载时设置“士兵”（在用户输入任何值之前）。单击按钮时分配给对象是否合适？或者你是否希望将这些信息存储在“COOKIE”或类似的地方？ –

解决办法：

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>

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(); 
}

我添加功能hire()和约束它提交按钮。一个新的soldier对象正被推入soldiers的列表中。此外，我还添加了doReport()方法到Soldier和普通doReport()函数，该函数对列表中的所有士兵进行了总体报告。现在，我在每个hire()的末尾呼叫doReport()，但您可以通过点击另一个按钮来完成。

来源

2017-10-17 23:20:33 dhilt

我试着做你的js，没有东西打印出来 –

@BrandonBell打开一个浏览器控制台，我通过'console.log'输出它。在html中没有输出代码。顺便说一句，我可以添加它... – dhilt

ö好。雅这正是我需要的。然后我需要另一个按钮在页面上一次打印所有的士兵。我会怎么做？ –

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>

我不觉得我允许使用推。我只是想通过用户输入来制造新的士兵。我让代码更好一点。现在只需要它来实际打印

来源

2017-10-17 23:30:57

如何创建与用户输入对象中的JavaScript

回答

相关问题