我如何获取html输入元素以影响我的javascript类对象值字符名称

如何解决我如何获取html输入元素以影响我的javascript类对象值字符名称

我正在尝试基于游戏Bully创建一个基于文本的RPG，以便用户可以更改初始字符名称，仅此而已。所有其余的值只能通过战斗，锻炼等各种动作来更改，这些动作将带有按钮。

如您所见，我创建了一个HTML表单输入元素（用于用户/玩家/头像名称）。

当您单击按钮时，它应该更改类字符对象的第一个值，而其余部分保持不变。

这是表单和按钮：

<form>
    <input type="text" name="firstName" id="firstName">
    <button type="button" onclick="getValue()"> Get Value </button>
</form>

这就是JavaScript类对象/构造函数/原型。

function character(name,age,strength,skill,morale,respect,fat,height) {
    this.name=name;
    this.age=age;
    this.strength=strength;
    this.skill=skill;
    this.morale=morale;
    this.respect=respect;
    this.fat=fat;
    this.height=height;
};

到目前为止很好，但这是我失去牵引力的地方...

function getValue() {
    var val = document.getElementById("firstName").value;
    var mainC = new character(val,14,20,10,1.89);
    document.write(mainC);
};

我还尝试过将表单值原样放入上面所示的对象值声明中：

function getValue() {
    var mainC = new character(  document.getElementById("firstName").value,1.89);
    document.write(mainC);
};

我也尝试仅使用click事件并添加事件侦听器。通过所有这些尝试，我在控制台中获得的通常输出是：

[object Object]

我认为这与亲子困境有关，但这只是一个猜测，如果真是那样，我将不知道如何解决该问题。

自从我奋斗了几个月以来，几乎将要放弃，任何帮助将不胜感激。

在这里，我正在尝试制作完整的游戏，以帮助那些回答我更多问题的人。因此，亚当将是这里的角色或可玩角色，韦恩将成为敌人或盟友，这取决于通过按下按钮进行的连续选择。

<!doctype html>
<html>
<head> 
<title>
Rule the School
</title> 
</head> 
<body> 
<h1> Rule the School </h1> 
<p id="storyIntro"> </p> 
<br> 
<br> 
<button id="apology">Tell him you're sorry </button> 
<br> 
<br> 
<button onclick="silence()">Put your head down and walk away in silence </button> 
<br> 
<br> 
<button onclick="tellOff()">Tell him to leave you alone </button> 
<br> 
<br> 
<button onclick="shove()">Shove him </button> 
<br> 
<br> 
<button onclick="punch()">Punch him </button> 
<br> 
<br> 
<button onclick="grab()">Grab him </button> 
<br> 
<br> 
<button onclick="kick()">Kick him </button> //
<p id="apologyEffect"></p>// 
<script>
function character
(name,height)
{
this.name=name;
this.age=age;
this.strength=strength;
this.skill=skill;
this.morale=morale;
this.respect=respect;
this.fat=fat;
this.height=height;
};

// Button responses
document.getElementById("apology").addEventListener("click",function ()
{
document.write("Don't let it happen again");
document.write('<br/>');
mainC.respect = mainC.respect - 10;
document.write("Name: " + mainC.name);
document.write('<br/>');
document.write("Age: " + mainC.age);
document.write('<br/>');
document.write("Strength " + mainC.strength);
document.write('<br/>');
document.write("Skill: " + mainC.skill);
document.write('<br/>');
document.write("Morale: " + mainC.morale);
document.write('<br/>');
document.write("Respect: " + mainC.respect);
document.write('<br/>');
document.write("Fat: " + mainC.fat);
document.write('<br/>');
document.write("Height: " + mainC.height);
});

/* document.getElementById("apologyEffect").innerHTML = currentStats() {};
};
*/

var currentStats = function stats ()
{

}

//Characters
var mainC = new character("Adam",1.89);
var wayne = new character("Wayne",45,35,55,5,1.7);

//Story
document.getElementById("storyIntro").innerHTML =
"Hi my name is " + mainC.name + "and Im came into a fight with: " + wayne.name + ". Do you: "

</script> 
</body>
</html>

解决方法

不可能将javascript对象转换为要在HTML中显示的值。尝试访问className.propertyName

或显示属性名称和值：

function getValue() {
 var val = document.getElementById("firstName").value;
 var mainC = new character(val,14,20,10,1.89);
 for (let item in mainC) {
  document.write(item + ': ' + mainC[item])
 }
}

我如何获取html输入元素以影响我的javascript类对象值字符名称

如何解决我如何获取html输入元素以影响我的javascript类对象值字符名称

解决方法

相关推荐