如何使用用戶輸入javascript創建對象

Question

 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>

我知道如何制作對象，但我不知道如何讓用戶輸入對象的數據並打印到屏幕上。

Answer 1

解決方案：

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列表。 我還向Soldier添加了doReport()方法和常用的doReport()函數，它可以對列表中的所有士兵進行一般報告。 現在，我在每個hire()的末尾調用doReport() )，但你可以通過單擊另一個按鈕來完成。

Answer 2

 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(){ var submitButton = document.getElementById("button"); 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>

我認為我不允許使用推送。 我只是想通過用戶輸入來制作新士兵。我使代碼更好一點。 現在只需要它來實際打印

如何使用用戶輸入javascript創建對象

問題描述

2 個解決方案

解決方案1
0 2017-10-17 23:20:33

解決方案2
0 2017-10-17 23:30:57

如何使用用戶輸入javascript創建對象

問題描述

2 個解決方案

解決方案1 0 2017-10-17 23:20:33

解決方案2 0 2017-10-17 23:30:57

解決方案1
0 2017-10-17 23:20:33

解決方案2
0 2017-10-17 23:30:57