我如何让我的 html 输入元素影响我的 javascript 类对象值（字符名称）

Question

我正在尝试基于游戏 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, 0, 10, 10, 1.89);
    document.write(mainC);
};

我还尝试将表单值按原样放入上面看到的对象值声明中，如下所示：

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

我也试过只使用一个点击事件并添加一个事件侦听器。 从所有这些尝试中，我在控制台中得到的通常输出是：

[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, 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;
};

// 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", 14, 20, 10, 0, 10, 10, 1.89);
var wayne = new character("Wayne", 14, 45, 35, 55, 20, 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>

Answer 1

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

或者显示属性名称和值：

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

我如何让我的 html 输入元素影响我的 javascript 类对象值（字符名称）

问题描述

1 个解决方案

解决方案1
0 2020-08-24 20:33:16

我如何让我的 html 输入元素影响我的 javascript 类对象值（字符名称）

问题描述

1 个解决方案

解决方案1 0 2020-08-24 20:33:16

解决方案1
0 2020-08-24 20:33:16