关于innerHTML获取的变量无法正确执行数值相加的技术咨询

Hey there! The issue you're hitting is totally common—any content you pull via innerHTML is always a string, so using the + operator on those values will concatenate them like text instead of adding them as numbers. Let's fix this and clean up your code at the same time.

Why This Happens #

When you grab v.innerHTML or a.innerHTML, you're getting text (even if it looks like a number). So when you do v.innerHTML += a.innerHTML, it's just sticking the two strings together ("0" + "1" = "01") instead of doing math.

How to Fix It #

You need to convert those string values to actual numbers before adding them. You can use one of these reliable methods:

• parseInt(string, 10): Converts to an integer (always include the 10 to ensure base-10, avoiding weird octal bugs)
• parseFloat(string): Use this if you might work with decimal numbers later
• Number(string): Another straightforward way to convert text to a number

Fixed Code #

Let's correct your code with these fixes, plus fix a few syntax errors you had (like missing document. before getElementById and a misspelled parseInt):

<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'>1</h1>
    </div>
    <h1 id='root-SuperGloabalVar1'>0</h1>
    <img onclick='
        // Grab elements correctly with document.getElementById
        const valueElement = document.getElementById("root-SuperGloabalVar1");
        const perClickElement = document.getElementById("perclick");
        
        // Convert innerHTML strings to integers
        const currentValue = parseInt(valueElement.innerHTML, 10);
        const perClickValue = parseInt(perClickElement.innerHTML, 10);
        
        // Add the numbers, then update the DOM
        const newValue = currentValue + perClickValue;
        valueElement.innerHTML = newValue;
    ' 
    src='https://www.pngitem.com/pimgs/m/155-1559954_cartoon-nose-images-cartoon-nose-image-png-transparent.png'>
</body>
</html>

Key Changes Explained #

• Added document. before getElementById (without this, the browser won't recognize the function)
• Used parseInt(..., 10) to convert both string values to integers before adding
• Separated the logic: first get the values, convert them, do the math, then update the DOM (this makes the code easier to read and debug)
• Switched to const instead of var for better variable scoping (a modern best practice)

Now when you click the nose, it'll add the numbers properly instead of concatenating strings!

内容的提问来源于stack exchange，提问作者Gabriel Smith