How can i change innerHTML +1?

Question

I want to change the innerHTML so for every circle thats the same it adds +1

if (document.getElementById("circle1").style.backgroundColor == document.getElementById("circle5").style.backgroundColor) {
    document.getElementById("point2").innerHTML = +1
}

if (document.getElementById("circle2").style.backgroundColor == document.getElementById("circle6").style.backgroundColor) {
    document.getElementById("point2").innerHTML = +1
}

`document.getElementById("point2").innerHTML+ = "+1"`. If you want to append the string. — Krishna Prashatt, Aug 08 '19 at 07:39
@Dario What do you have here ? `document.getElementById("point2").innerHTML`? and what result do you expect? — Krishna Prashatt, Aug 08 '19 at 07:42
@Krishna Prashatt i want a dot to change the numbre from 0 to 2 when poth circles are the same color. — Dario, Aug 08 '19 at 07:51

score 0 · Accepted Answer · answered Aug 08 '19 at 07:45

I suggest you to use innerText then. First get the old value and cast to Number then add by 1 and replace the old value. Example:

if (document.getElementById("circle1").style.backgroundColor == document.getElementById("circle5").style.backgroundColor) {
    let obj = document.getElementById("point2");
    let oldValue = Number(obj.innerText);
    obj.innerText = oldValue + 1;
}

if (document.getElementById("circle2").style.backgroundColor == document.getElementById("circle6").style.backgroundColor) {
    let obj = document.getElementById("point2");
    let oldValue = Number(obj.innerText);
    obj.innerText = oldValue + 1;
}

See difference between innerText and innerHtml.

score 0 · Answer 2 · answered Aug 08 '19 at 07:48

document.getElementById("point2").innerHTML doesn't give you a number, so you cannot add 1 to it. first you need to parse the content to a number (like with parseInt or Number), and then you can add 1.

// creating the reference variable (for smaller code)
var point2 = document.getElementById("point2").innerHTML

if (document.getElementById("circle1").style.backgroundColor ==
  document.getElementById("circle5").style.backgroundColor) {
  document.getElementById("point2").innerHTML = increment(point2)
}
if (document.getElementById("circle2").style.backgroundColor ==
  document.getElementById("circle6").style.backgroundColor) {
  document.getElementById("point2").innerHTML = increment(point2)
}

// function to increment the value of point2
function increment(html) {
  return Number(document.getElementById("point2").innerHTML) + 1
}

#circle1 {
  background-color: red;
}

#circle5 {
  background-color: red;
}

#circle2 {
  background-color: red;
}

#circle6 {
  background-color: red;
}

<div id="circle1">C1</div>
<div id="circle5">C5</div>
<br />
<div id="circle2">C2</div>
<div id="circle6">C6</div>

<div id="point2">0</div>

How can i change innerHTML +1?

2 Answers2