如何创建与用户输入对象中的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>
我知道如何创建一个对象,但我不知道如何使用户输入对象的数据,并打印到屏幕上。
解决办法:
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();
}
我添加功能hire()
和约束它提交按钮。一个新的soldier
对象正被推入soldiers
的列表中。此外,我还添加了doReport()
方法到Soldier
和普通doReport()
函数,该函数对列表中的所有士兵进行了总体报告。现在,我在每个hire()
的末尾呼叫doReport()
,但您可以通过点击另一个按钮来完成。
我试着做你的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>
我不觉得我允许使用推。我只是想通过用户输入来制造新的士兵。我让代码更好一点。现在只需要它来实际打印
你什么时候提示用户输入他们的输入?您似乎正在使用标准的''盒子,但正尝试在页面加载时设置“士兵”(在用户输入任何值之前)。单击按钮时分配给对象是否合适?或者你是否希望将这些信息存储在“COOKIE”或类似的地方? –