How do i get my html input element to influence my javascript class object value(character name)
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. 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).
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.
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>
1 answers
solution1
0 2020-08-24 20:33:16
It is not possible to transform a javascript object into a value to be displayed in HTML. Try to access 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])
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.