0

I'm trying to make a character card for my project. Only 3 points are to be available. If you add 1 + 1 + 1, the result is 111. How do I get the result to be 3?

Here is my code HTML

        <div id="container">
            <form id="form">
                <h1 style="text-align:center;font-size:32px;">Character Card</h1>
                <br><br>
                <h3>Skill 1</h3>
                <input type="number" min="0" max="2" value="0" id="input">
                <br><br>
                <h3>Skill 2</h3>
                <input type="number" min="0" max="2" value="0" id="input2">
                <br><br>
                <h3>Skill 3</h3>
                <input type="number" min="0" max="2" value="0" id="input3">
                <br><br>
                <input type="button" onclick="Check()" value="Check value">
                <h2 id="error">You can only allocate 3 points</h2>
        </form>
        </div>

JavaScript

function Check() {
        var skill1 = document.getElementById("input").value;
        var skill2 = document.getElementById("input2").value;
        var skill3 = document.getElementById("input3").value;
        var value = skill1 + skill2 + skill3;

        document.getElementById("error").innerHTML = value;
        
        if(value == 0) {
            document.getElementById("error").innerHTML = 'Choose your character points';
        }
}

And this is my JSFiddle

maciejel
  • 3
  • 2

1 Answers1

0
var skill1 = document.getElementById("input").value;  // = "1"
var skill1 = parseInt(document.getElementById("input").value);  // = 1

http://jsfiddle.net/dw3yxka9/

Neil W
  • 7,670
  • 3
  • 28
  • 41