如何創建與用戶輸入對象中的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

回答

相關問題