My 'that' variable is not referring to the correct object when I use a method on the object.
For example, isaac.healthItem.use() displays "Mia" in the console and not "Isaac".
Why is 'this' not referring to the calling object?
var get = function(id) {
return document.getElementById(id);
}
var that;
var divider = "\n-----------------------";
var Adventurer = function(name, weapon, health, mana) {
this.name = name;
this.health = health;
this.maxHealth = health;
this.maxOverheal = this.maxHealth * 2;
this.mana = mana;
this.inventory = [];
this.spells = [];
this.weapon = weapon;
that = this;
}
Adventurer.prototype.addToInventory = function(item) {
this.inventory.push(item);
}
Adventurer.prototype.addSpell = function(spell) {
this.spells.push(spell);
}
Adventurer.prototype.setWeapon = function(weapon) {
this.weapon = weapon;
}
var HealthItem = function() {
this.healthItemName = "";
this.healAmount = 0;
this.use = function() {
console.log(that.name);
for (var x = 0; x < that.inventory.length; x++) {
if (that.inventory[x] == "HP Pot") {
this.healthItemName = "HP Pot";
this.healAmount = 30;
that.health += this.healAmount;
console.log(that.name + " Has Used " + this.healthItemName + " For " + this.healAmount + divider);
if (that.health > that.maxHealth && that.health < that.maxOverheal) {
var overheal = that.health - that.maxHealth;
console.log("Overhealed by " + overheal + "!");
} else if (that.health > that.maxOverheal) {
console.log(that.name + " cannot " + "be " + "overhealed " + "anymore!");
that.health = that.maxOverheal;
}
that.inventory[x] = "";
return;
}
}
console.log("No Health Items in Inventory" + divider);
}
}
Adventurer.prototype.healthItem = new HealthItem();
Adventurer.prototype.adventurerData = function() {
console.log(this.name + divider);
console.log("Health: " + this.health + divider);
console.log("Mana: " + this.mana + divider);
}
Adventurer.prototype.viewSpells = function() {
for (var i = 0; i < this.spells.length; i++) {
console.log(this.spells[i] + divider);
}
}
Adventurer.prototype.useSpell = function(spell) {
for (var i = 0; i < this.spells.length; i++) {
if (this.spells[i] == spell) {
console.log(this.name + " Used " + this.spells[i] + " For" + " 30 Damage!" + divider);
return;
}
}
console.log("You don't know how to do that..." + divider);
}
Adventurer.prototype.viewInventory = function() {
for (var x = 0; x < this.inventory.length; x++) {
console.log(this.inventory[x] + divider);
}
if (this.inventory.length == 0) {
console.log("Your bag is empty");
}
}
Adventurer.prototype.lotOfPots = function() {
for (var i = 0; i < 50; i++) {
this.addToInventory("HP Pot");
}
}
var isaac = new Adventurer("Isaac", "Ragnarok", 100, 50);
var mia = new Adventurer("Mia", "Celestial Staff of Water", 80, 90);
isaac.addSpell("Earthquake");
isaac.addSpell("Push");
isaac.addSpell("Healing Wave");
mia.addSpell("Soothing Waters");
mia.addSpell("Sleet");
mia.addSpell("Waterfall");
mia.adventurerData();
The problem is
var that; // Global variable
var Adventurer = function(name, weapon, health, mana) {
....
that = this; // Assign the calling object to global variable
}
var isaac = new Adventurer("Isaac", "Ragnarok", 100, 50);
var mia = new Adventurer("Mia", "Celestial Staff of Water", 80, 90);
So that is overwritten by isaac and then mia so when HealthItem calls console.log(that.name), that refers to mia
It's because "that" is a global variable. When you create the second adventurer, you're overwriting "that" with the second adventurer's values.
Did you tried passing "that" as a parameter to Adventurer function?
Related
How can I get Blogger to display random posts, while preventing an infinite loop when there are no posts to display?
Here is my JavaScript code which I am attempting to use:
<script>
var dt_numposts = 10;
var dt_snippet_length = 100;
var dt_info = 'true';
var dt_comment = 'Comment';
var dt_disable = '';
var dt_current = [];
var dt_total_posts = 0;
var dt_current = new Array(dt_numposts);
function totalposts(json) {
dt_total_posts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/summary?max-results=100&orderby=published&alt=json-in-script&callback=totalposts\"><\/script>');
function getvalue() {
for (var i = 0; i < dt_numposts; i++) {
var found = false;
var rndValue = get_random();
for (var j = 0; j < dt_current.length; j++) {
if (dt_current[j] == rndValue) {
found = true;
break
}
};
if (found) {
i--
} else {
dt_current[i] = rndValue
}
}
};
function get_random() {
var ranNum = 1 + Math.round(Math.random() * (dt_total_posts - 1));
return ranNum
};
function random_list(json) {
a = location.href;
y = a.indexOf('?m=0');
for (var i = 0; i < dt_numposts; i++) {
var entry = json.feed.entry[i];
var dt_posttitle = entry.title.$t;
if ('content' in entry) {
var dt_get_snippet = entry.content.$t
} else {
if ('summary' in entry) {
var dt_get_snippet = entry.summary.$t
} else {
var dt_get_snippet = "";
}
};
dt_get_snippet = dt_get_snippet.replace(/<[^>]*>/g, "");
if (dt_get_snippet.length < dt_snippet_length) {
var dt_snippet = dt_get_snippet
} else {
dt_get_snippet = dt_get_snippet.substring(0, dt_snippet_length);
var space = dt_get_snippet.lastIndexOf(" ");
dt_snippet = dt_get_snippet.substring(0, space) + "
";
};
for (var j = 0; j < entry.link.length; j++) {
if ('thr$total' in entry) {
var dt_commentsNum = entry.thr$total.$t + ' ' + dt_comment
} else {
dt_commentsNum = dt_disable
};
if (entry.link[j].rel == 'alternate') {
var dt_posturl = entry.link[j].href;
if (y != -1) {
dt_posturl = dt_posturl + '?m=0'
}
var dt_postdate = entry.published.$t;
if ('media$thumbnail' in entry) {
var dt_thumb = entry.media$thumbnail.url
} else {
dt_thumb = "https://blogspot.com/"
}
}
};
document.write('<img alt="' + dt_posttitle + '" src="' + dt_thumb + '"/>');
document.write('<div>' + dt_posttitle + '</div>');
if (dt_info == 'true') {
document.write('<span>' + dt_postdate.substring(8, 10) + '/' + dt_postdate.substring(5, 7) + '/' + dt_postdate.substring(0, 4) + ' - ' + dt_commentsNum) + '</span>'
}
document.write('<div style="clear:both"></div>')
}
};
getvalue();
for (var i = 0; i < dt_numposts; i++) {
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/summary?alt=json-in-script&start-index=' + dt_current[i] + '&max-results=1&callback=random_list\"><\/script>')
};
</script>
Expected output:
?
Actual output:
?
It looks like your post is mostly code; please add some more details.
It looks like you're trying to populate dt_current with dt_numposts = 10 elements. I modified getvalue() as follows, so that dt_numposts is capped at dt_total_posts, which may be 0. This allows the outer for loop to exit.
function getvalue() {
dt_numposts = (dt_total_posts < dt_numposts) ? dt_total_posts : dt_numposts;
// ...
I couldn't test this, because I don't have an example /feeds/posts/summary?max-results=100&orderby=published&alt=json-in-script&callback=totalposts JSON resource, but it works for zero posts. Whether is works for dt_numposts > 0, you'll need to test!
I want to implement the logic of the hero's evasion in the "kick" method.For the Hero a certain amount of the "evasion" property is set, on the basis of which its percentage of evasion depends, an example of the "evasion" archer is 0.6 that is 60 percent chance to evade the "kick".How to properly implement this logic and that the result of the message, display damage or evasion
function Unit(maxHealth, basicDamage, evasion, type) {
this.maxHealth = maxHealth;
this.currentHeaalth = maxHealth;
this.basicDamage = basicDamage;
this.evasion = evasion;
this.type = type;
/*method for showing the status of life, true if the "health" is greater
than 0 and false if equal to or lower */
this.isAlive = function () {
return this.currentHeaalth > 0
};
/* a method that
shows the level of health*/
this.getFormattedHealth = function () {
return this.currentHeaalth + '/' + this.maxHealth + ' HP';
};
/*a method that returns the base damage of the heroand damage to the
weapon (if it is set)*/
this.getDamage = function () {
return (this.weapon ? this.weapon.getDamage() : 0) + this.basicDamage;
};
/* The method of hitting
the hero for the chosen purpose*/
this.kick = function (target) {
if (this.isAlive()) {
target.currentHeaalth = Math.max(0, target.currentHeaalth - this.getDamage());
}
return this;
};
/*method for showing all the characteristics of the hero and changes
with them*/
this.toString = function () {
return "Type - " + this.type + ", is alive - " + this.isAlive() + ", " + this.getFormattedHealth() + ', hero current damage - ' + this.getDamage() + ' points' +
", hero evasion - " + this.evasion;
}
}
function Archer(maxHealth, basicDamage, evasion) {
Unit.apply(this, arguments);
this.type = "archer";
}
var archer = new Archer(60, 5, 0.6);
function Swordsman(maxHealth, basicDamage, evasion) {
Unit.apply(this, arguments);
this.type = "swordsman";
}
var swordsman = new Swordsman(100, 10, 0.3)
while (archer.isAlive() && swordsman.isAlive()) {
archer.kick(swordsman);
swordsman.kick(archer);
}
console.log(archer.toString());
console.log(swordsman.toString());
Write a function which fills an array with 10 digit of 0s and 1s according to evasion and return a random 1 or 0:
let evasion = 0.4,
probability = function() {
var notRandomNumbers = [],
maxEvasion = 0;
if ((evasion + '').split('.')[0] == 1 && (evasion + '').split('.')[1] == 0) {
maxEvasion = 10;
} else {
maxEvasion = (evasion + '').split('.')[1];
}
for (var i = 0; i < maxEvasion; i++) {
notRandomNumbers.push(1);
}
for (var i = 0; i < 10 - maxEvasion; i++) {
notRandomNumbers.push(0);
}
var idx = Math.floor(Math.random() * notRandomNumbers.length);
return notRandomNumbers[idx];
}
console.log('1 )', probability());
console.log('2 )', probability());
console.log('3 )', probability());
console.log('4 )', probability());
Use it in kick function.
this.kick = function(target) {
if (this.isAlive()) {
target.currentHeaalth = Math.max(
0,
target.currentHeaalth - this.probability() * this.getDamage()
);
}
};
Full code will be this:
function Unit(maxHealth, basicDamage, evasion, type) {
this.maxHealth = maxHealth;
this.currentHeaalth = maxHealth;
this.basicDamage = basicDamage;
this.evasion = evasion;
this.type = type;
/*method for showing the status of life, true if the "health" is greater
than 0 and false if equal to or lower */
this.isAlive = function() {
return this.currentHeaalth > 0;
};
/* a method that
shows the level of health*/
this.getFormattedHealth = function() {
return this.currentHeaalth + "/" + this.maxHealth + " HP";
};
this.probability = function() {
var notRandomNumbers = [],
maxEvasion = 0;
if (
(this.evasion + "").split(".")[0] == 1 &&
(this.evasion + "").split(".")[1] == 0
) {
maxEvasion = 10;
} else {
maxEvasion = (this.evasion + "").split(".")[1];
}
for (var i = 0; i < maxEvasion; i++) {
notRandomNumbers.push(1);
}
for (var i = 0; i < 10 - maxEvasion; i++) {
notRandomNumbers.push(0);
}
var idx = Math.floor(Math.random() * notRandomNumbers.length);
return notRandomNumbers[idx];
};
/*a method that returns the base damage of the heroand damage to the
weapon (if it is set)*/
this.getDamage = function() {
return (this.weapon ? this.weapon.getDamage() : 0) + this.basicDamage;
};
/* The method of hitting
the hero for the chosen purpose*/
this.kick = function(target) {
if (this.isAlive()) {
target.currentHeaalth = Math.max(
0,
target.currentHeaalth - this.probability() * this.getDamage()
);
}
};
/*method for showing all the characteristics of the hero and changes
with them*/
this.toString = function() {
return (
"Type: " +
this.type +
", is alive: " +
this.isAlive() +
", " +
this.getFormattedHealth() +
", hero current damage: " +
this.getDamage() +
" points" +
", hero evasion - " +
this.evasion
);
};
}
function Archer(maxHealth, basicDamage, evasion) {
Unit.apply(this, arguments);
this.type = "archer";
}
var archer = new Archer(60, 5, 0.6);
function Swordsman(maxHealth, basicDamage, evasion) {
Unit.apply(this, arguments);
this.type = "swordsman";
}
var swordsman = new Swordsman(100, 10, 0.3);
while (archer.isAlive() && swordsman.isAlive()) {
archer.kick(swordsman);
swordsman.kick(archer);
}
console.log(archer.toString());
console.log(swordsman.toString());
Hope this helps you.
I am trying to execute this code but for some reason that I cannot figure out the RoundRobin function will execute onload rather than onclick. I have tried removing window.onload or replacing it with document.onload. All I want is for this line document.getElementById("tableButton").onclick = RoundRobin(teamsIn); to wait for the onclick trigger.
var selectedTeams = [];
window.onload = function() {
// JavaScript Document
// add selected teams to array
var teamList = document.getElementById("teamDropdown");
teamList.onchange = function addTeams() {
if (selectedTeams.length > 7) {
alert("no more teams")
} else {
var county = document.getElementById("teamDropdown").value;
selectedTeams.push(county);
}
alert("counties selected are: " + selectedTeams);
}
var teamsIn = 0;
teamsIn = selectedTeams.length;
document.getElementById("tableButton").onclick = RoundRobin(teamsIn);
// slideshow.
var imageArray = new Array();
imageArray[0] = new Image()
imageArray[0].src = "Sponsors/aib.png"
imageArray[1] = new Image()
imageArray[1].src = "Sponsors/centra.jpg"
imageArray[2] = new Image()
imageArray[2].src = "Sponsors/eircom.png"
imageArray[3] = new Image()
imageArray[3].src = "Sponsors/etihad.png"
imageArray[4] = new Image()
imageArray[4].src = "Sponsors/liberty.jpg"
imageArray[5] = new Image()
imageArray[5].src = "Sponsors/supervalu.png"
var step = 0;
function slideShow() {
document.getElementById('slideshow').src = imageArray[step].src
if (step < 5)
step++
else
step = 0
setTimeout("slideShow()", 4000)
}
function RoundRobin(teams) {
alert(teams);
var i;
var ret = "";
var round;
var numplayers = 0;
numplayers = parseInt(teams) + parseInt(teams % 2);
numplayers = parseInt(numplayers);
alert(numplayers);
var a = new Array(numplayers - 1);
var alength = a.length;
for (var x = 0; x < (numplayers); x++) {
a[x] = "Team " + (x + 1);
}
if (numplayers != parseInt(teams)) {
a[alength] = "BYE";
}
var pos;
var pos2;
ret = "----- ROUND #1-----<br />"
for (var r1a = 0; r1a < (numplayers / 2); r1a++) {
ret += a[r1a] + " vs. " + a[alength - r1a] + "<br />"
}
for (round = 2; round < alength + 1; round++) {
ret += "<br /><br />----- ROUND #" + round + "-----<br />"
ret += a[0] + " vs. " + a[alength - (round - 1)] + "<br />"
for (i = 2; i < (numplayers / 2) + 1; i++) {
pos = (i + (round - 2))
if (pos >= alength) {
pos = ((alength - pos)) * -1
} else {
pos = (i + (round - 2))
}
pos2 = (pos - (round - 2)) - round
if (pos2 > 0) {
pos2 = (alength - pos2) * -1
}
if (pos2 < (alength * -1)) {
pos2 += alength
}
ret += a[(alength + pos2)]
ret += " vs. " + a[(alength - pos)] + "<br />"
}
}
var text = document.getElementById('fixtures');
text.innerHTML = ret;
return ret
}
// round robin format
}
What's happening is that you call the function, then you assing the return value to the onclick property. For the event handler to work you need to assign a function to the property.
Wrap the call in a function expression:
document.getElementById("tableButton").onclick = function(){
RoundRobin(teamsIn);
};
I'm practicing OOP in JavaScript for the first time, and don't understand why the inheritance isn't working.
Code:
function Card(s, v) {
if (arguments.length === 0) {
this.suit = SUITS[Math.floor(Math.random()*SUITS_LENGTH)];
this.val = VALS[Math.floor(Math.random()*VALS_LENGTH)];
}
else {
this.suit = s;
this.val = v;
}
}
Card.prototype = {
constructor: Card,
toString: function() {
return this.val + " of " + this.suit;
},
lowVal: function() {
if (this.val === "A") { return 1; }
else if (this.val === "J" || this.val === "Q" || this.val === "K") { return 10; }
else { return parseInt(this.val); }
},
highVal: function() {
if (this.val === "A") { return 11; }
else if (this.val === "J" || this.val === "Q" || this.val === "K") { return 10; }
else { return parseInt(this.val)}
}
};
function CardHolder() {
this.status = "in";
this.cards = [];
}
CardHolder.prototype = {
constructor: CardHolder,
deal: function() {
this.cards.push(new Card());
},
lowVal: function() {
var lowVal = 0;
for (var i = 0, len = this.cards.length; i < len; i++) {
lowVal += this.cards[i].lowVal();
}
return lowVal;
},
highVal: function() {
var highVal = 0;
for (var i = 0, len = this.cards.length; i < len; i++) {
highVal += this.cards[i].highVal();
}
return highVal;
},
score: function() {
if (this.highVal() > 21) { return this.lowVal(); }
else { return this.highVal(); }
}
};
function Player(id) {
CardHolder.call(this);
if (typeof(id)) {
this.id = id;
}
}
Player.prototype = Object.create(CardHolder.prototype);
Player.prototype = {
constructor: Player,
toString: function() {
var returnString = "Player " + this.id + ":\n";
for (var i = 0, len = this.cards.length; i < len; i++) {
returnString += this.cards[i].toString() + "\n"
}
return returnString;
}
}
Output
var p = new Player();
p.deal();
console.log(p.toString());
Outputs Uncaught TypeError: undefined is not a function. Which I think means that p isn't inheriting the deal function from CardHolder.
Why isn't it working?
The problem is that
Player.prototype = {
constructor: Player,
toString: function() {
var returnString = "Player " + this.id + ":\n";
for (var i = 0, len = this.cards.length; i < len; i++) {
returnString += this.cards[i].toString() + "\n"
}
return returnString;
}
}
is overwriting the value that was assigned to Player.prototype in
Player.prototype = Object.create(CardHolder.prototype);
To avoid that, you can do this:
Player.prototype = Object.create(CardHolder.prototype);
Player.prototype.constructor = Player;
Player.prototype.toString = function() {
var returnString = "Player " + this.id + ":\n";
for (var i = 0, len = this.cards.length; i < len; i++) {
returnString += this.cards[i].toString() + "\n"
}
return returnString;
};
When you make an assignment to Object.prototype, you are clobbering out anything it initially had with the new assignment, so in your assignment to Player.prototype, you are literally assigning constructor and toString but then clobbering out anything else. Try this instead:
Player.prototype = Object.create(CardHolder.prototype);
Player.prototype.constructor = Player; //adding constructor, not clobbering the rest of prototype
Player.prototype.toString=function() { //adding toString, not clobbering the rest of prototype
var returnString = "Player " + this.id + ":\n";
for (var i = 0, len = this.cards.length; i < len; i++) {
returnString += this.cards[i].toString() + "\n"
}
return returnString;
};
var p = new Player();
p.deal();
console.log(p.toString());
I have these lines of code in my program. I want to implement setTimeout in a javascript class. I tried storing "this" but seems didn't work out for me.
In this class logic is if input is 0, then it will show output 0, but if input is 1 it will start a timer which is already specified and after that timer finishes it will give output its a ondelay timer.
ONDClass = function(){
this.id;
this.input;
this.source;
this.target;
this.timer;
var timerValue;
this.TimerID;
this.TotalSeconds;
var thisObj = this;
var c = 0;
this.setID = function(id){
this.id = id;
timerValue = this.id + "C";
}
this.getID = function(){
return this.id;
}
this.setTimer = function(timer){
this.timer = timer
}
this.getTimer = function(timer){
return this.timer;
}
this.UIelementTaget = function(target){
this.target = target;
}
this.UIelementSource = function(source){
this.source = source;
}
this.setInput = function(input){
this.input = input;
}
this.getInput = function(){
return this.input
}
this.UpdateTimer = function(){
console.log(c);
document.getElementById(timerValue).innerHTML = c;
}
this.createTimer = function(timerValue,time){
this.TimerID = document.getElementById(timerValue);
this.TotalSeconds = time;
// this.UpdateTimer();
setTimeout(function() {
document.getElementById(timerValue).innerHTML = c;
console.log(c);
thisObj.Tick();
}, 1000)
}
this.Tick = function(){
c++
//this.UpdateTimer();
if(c < this.TotalSeconds){
setTimeout(function() {
document.getElementById(timerValue).innerHTML = c;
console.log(c);
thisObj.Tick();
}, 1000)
} else {
return this.input;
}
}
this.getOutput = function(){
if(this.input == 0){
var htmltimer = "<div id = " + timerValue + " class = 'timerValue'>" + this.getTimer() + "</div>";
$("#" + this.id).append(htmltimer);
return this.input;
} else {
var htmltimer = "<div id = " + timerValue + " class = 'timerValue'></div>";
$("#" + this.id).append(htmltimer);
this.createTimer(timerValue,this.getTimer());
return this.input;
}
}
this.getUISourceElement = function(){
if(this.source == undefined)
return false;
else
return true;
}
this.addExtraDiv = function(){
var divinput = this.id +"I";
var divoutput = this.id +"O";
var htmlinput = "<div id = " + divinput + " class = 'inputBoxTimer'>" + this.getInput()+ "</div>";
var htmloutput = "<div id = '" + divoutput + "' class = 'outputBoxTimer'>" + this.getOutput() + "</div>";
$("#" + this.id).append(htmloutput);
$("#" + this.id).append(htmlinput);
}
}
The problem is with the setTimeout function. It's not calling every time and it's giving me same output weather its 1 or 0