Search code examples
javascriptmathtextnumbersinnerhtml

why does my innerHTML vars don't add correct?


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?

a fiddle to see whats so wrong

<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>

Solution

  • 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>