why does my innerHTML vars don't add correct?-CodePudding

Ok so it does add, but not right

So my vars think that they are text but I want just the nums, so I can add them together.

How do I do this?

<html>
<head>

<title>Nose Clicker</title>
<style>
  body{
  background-image:url("https://i.pinimg.com/originals/66/27/70/6627703d20110ad2e8877fab5fc102b9.jpg");
  }
  #root-SuperGloabalVar1{
  color: red;
  font-size: 150px;
  padding: 0px;
  }
  #var-wrapper{
  opacity: 0%;
     }
</style>
</head>
<body>
<div id = 'var-wrapper'>

<h1 class = 'vars' id = 'perclick'>

<---here is the first addend--->
1

</h1>

</div>
<---here the second one--->

<h1 id = 'root-SuperGloabalVar1'>0</h1>


<img onclick = '

<---get number 1--->
var v = getElementById("root-SuperGloabalVar1");
<---get number 2--->
var a = getElementById("perclick");
<---adding--->
var w = v.innerHTML =a.innerHTML;
<---replacing and then it shows "01"--->
v.innerHTML(parrseint(a.innerHTML   v));


'
src = 'https://www.pngitem.com/pimgs/m/155-1559954_cartoon-nose-images-cartoon-nose-        image-png-transparent.png'>
</body>
</html>

CodePudding user response：

I didn't completely understand your question can you explain it a bit more and detailed but if you want to parse text into number then use

var x = a.innerHTML;
Number(x)

Edit:

And a proper way to use number increment and display it is like this:

(you don't need to save your integer in an element you can use a javascript variable)

    let clicks = 0;

    function countClicks() {
        clicks  ;
        const display = document.getElementById("display");
        display.innerHTML = clicks;
    }

<!DOCTYPE html>
<html lang="en">
<body>
    <div style="background: red; width: 100px; height: 100px;" onclick="countClicks();">
    </div>

    <div style="font-size: 30px;" id="display">0</div>
</body>


</html>

Example to use in onclick callback:

<body>
    <script>var clicks = 0;</script>
    <div style="background: red; width: 100px; height: 100px;" 
    onclick=
        "
            clicks  ;
            const display = document.getElementById('display');
            display.innerHTML = clicks;
        ">
    </div>

    <div style="font-size: 30px;" id="display">0</div>
</body>