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

Question

I am trying to create a text-based RPG based on the game Bully so the initial characters name can be changed by the user but that's all.我正在尝试基于游戏 Bully 创建一个基于文本的 RPG，因此用户可以更改初始角色名称，但仅此而已。 All the rest of the values can only be changed through various actions like fighting, exercise etc which there will be buttons for.所有其余的值只能通过战斗、锻炼等各种动作来改变，这些动作会有按钮。

So as you can see I created an HTML form input element (this is for the user/player/avatar name).如您所见，我创建了一个 HTML 表单输入元素（用于用户/玩家/头像名称）。

When you click on the button it should change the first value of the class character object but leave the rest as is.当您单击按钮时，它应该更改类字符对象的第一个值，但其余部分保持原样。

So here's the form and button:所以这是表单和按钮：

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

This then is the JavaScript class object/constructor/prototype.这就是 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;
};

So far so good but this is where I lose traction...到目前为止一切顺利，但这是我失去吸引力的地方......

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

I've also tried putting the form value as is into the object value declaration thing seen above like this:我还尝试将表单值按原样放入上面看到的对象值声明中，如下所示：

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

I've also tried using just a click event and adding an event listener.我也试过只使用一个点击事件并添加一个事件侦听器。 From all these attempts the usual output I get in the console is:从所有这些尝试中，我在控制台中得到的通常输出是：

[object Object]

Which I believe has got something to do with the parent-child dilemma but it's only a guess and if that's the case I wouldn't know how to solve that issue.我认为这与亲子困境有关，但这只是一种猜测，如果是这样，我将不知道如何解决该问题。

Any help would be greatly appreciated since I've been struggling for months and am close to giving up.任何帮助都将不胜感激，因为我已经挣扎了几个月并且快要放弃了。

Heres the full game which I'm trying to create just to aid those answering my questions a bit more.这是我正在尝试创建的完整游戏，只是为了帮助那些回答我的问题的人更多一点。 So adam would be the here or playable character and wayne would be an enemy or ally depending on consecutive choices made through the buttons being pressed.所以亚当将是这里或可玩的角色，而韦恩将是敌人或盟友，这取决于通过按下的按钮做出的连续选择。

<!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

It is not possible to transform a javascript object into a value to be displayed in HTML.无法将 javascript 对象转换为要在 HTML 中显示的值。 Try to access className.propertyName尝试访问 className.propertyName

Or to display the property names and values:或者显示属性名称和值：

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