JavaScript - What is the best way to remove an existing value from a DIV element?

Question

JavaScript - What is the best way to remove an existing value from a DIV element?

I'm currently developing a game where two players engage in combat.

Currently, I have managed to set up the system so that the player's health points (hp) are displayed as 100. However, when an event occurs causing the player to take 10 damage, instead of updating the hp bar to reflect 90, it simply concatenates and displays 10090.

How can I modify my code so that the previous value is updated rather than being appended next to it?

function player(hp, mana, stamina){
    this.hp = hp;
    this.mana = mana;
    this.stamina = stamina; 
}

function npc(hp, mana, stamina) {
    this.hp = hp;
    this.mana = mana;
    this.stamina = stamina;
}

var alistar = new player(100, 50, 30);
var dragon = new npc(100, 50, 30);

document.getElementById("hp").innerHTML += alistar.hp;

if (0 < 1) {
    alistar.hp = alistar.hp - 10;
    document.getElementById("hp").innerHTML += alistar.hp;
}

Using the "=" sign to update the value works, but it removes any HTML content I had in place. I may consider creating a second div box for my HTML needs and keeping the value separate.

javascript html css

Answer 1

Answer №1

If you want to replace the += with a simple =, just use the = symbol instead:

The = operator will overwrite the previous value, while the += combines the + and = operators for a quicker way to achieve the same result:

For example, if you need to add a value to a variable, you can do it like this:

var x = 3,
    value = 10; /* Your value, e.g. 10 */

x = x + value; /* x now equals 13 */

HOWEVER, you could achieve the same outcome using the += operator:

var x = 3,
    value = 10; /* Your value, e.g. 10 */

x += value; /* This adds the value of x to the value of the variable 'value'. */

In both cases, the value of x would be 13.

Looking at your code...

CODE:

if (0 < 1) {
    alistar.hp = alistar.hp - 10;
    document.getElementById("hp").innerHTML = alistar.hp; 
}

Answer 2

If you want to replace the += with a simple =, just use the = symbol instead:

The = operator will overwrite the previous value, while the += combines the + and = operators for a quicker way to achieve the same result:

For example, if you need to add a value to a variable, you can do it like this:

var x = 3,
    value = 10; /* Your value, e.g. 10 */

x = x + value; /* x now equals 13 */

HOWEVER, you could achieve the same outcome using the += operator:

var x = 3,
    value = 10; /* Your value, e.g. 10 */

x += value; /* This adds the value of x to the value of the variable 'value'. */

In both cases, the value of x would be 13.

Looking at your code...

CODE:

if (0 < 1) {
    alistar.hp = alistar.hp - 10;
    document.getElementById("hp").innerHTML = alistar.hp; 
}

Answer 3

Answer №2

when ( 1 > 0) {
alistar.hp = alistar.hp - 10;
document.getElementById("hp").innerHTML = alistar.hp;

}

In this context, the operator += is combining values as strings instead of adding them together. To correct this, you should use "=" to assign the hp value to the hp element, replacing the current innerHTML.

Answer 4

when ( 1 > 0) {
alistar.hp = alistar.hp - 10;
document.getElementById("hp").innerHTML = alistar.hp;

}

In this context, the operator += is combining values as strings instead of adding them together. To correct this, you should use "=" to assign the hp value to the hp element, replacing the current innerHTML.

JavaScript - What is the best way to remove an existing value from a DIV element?

Answer №1

Answer №2

Similar questions

Step-by-step guide on removing the focusin event listener from a Bootstrap 5 modal

Differences in CSS text padding when rendered in Firefox compared to Chrome and other web

Click to position custom text on image

Switching between different views in Angular UI-router by selecting one UI-view over another

Display solely the content within a specific Div

A guide on implementing header and sidebar rendering post login with Vue

Why does the script source direct me to localhost:5000?

Error: The object "request" has not been defined. This issue occurs when trying to execute an Action

Encountering CORS Issue when attempting to upload a file from an external URL using Angular

Creating a single row on the Wordpress options page with a colspan in the first row

The Evolution of Alternatives to contentEditable

Triggering a JQuery Toggle Button

Disabling the NavBar occurs when aligning it to the right

How to center the navigation text on a WordPress website within the header.php file

Utilizing Java to Store HTML Content in MySQL

Resizing Wordpress images to uniform height within a Bootstrap flex-row with flex-nowrap styling

ControlsContainer - jQuery object for Flexslider

Design your own unique HTML webpage

Encounter a routing issue in Node.js/Express

How can we server-side render the inner contents of an iframe in ReactJS to optimize SEO?