CODEWITHSUNDEEP
javascripthtmlbutton
Jason B
Jason B

Reputation: 65

HTML Button not interacting with Javascript

I'm attempting to make a simple click counter. I believe my JS is sound, but I'm not getting any functionality from the HTML button calling it.

I've tried calling my JS function from the HTML button using.. 

 <button onclick="addOne()"

..but the button simply isn't producing an output. Below is a sample of the issue which features my JS function and HTML.

<body>
    <div>
        <h1><span id="thisone">1</span></h1>
        <button onclick="addOne()" type="submit">Button</button>
    </div>
</body>
<script type="text/javascript">
    function addOne(){
        const foo = document.getElementById('thisone').innerHTML;
        foo++;
        document.getElementById('thisone').innerHTML = foo;    
    };
</script>

As of now, it simply presses and the number remains unchanged. I'm trying to have the number in increase by 1 each time the button is clicked.

Upvotes: 1

Views: 158

Answers (5)

w3Develops
w3Develops

Reputation: 388

To solve this problem you must replace your const keyword with the let keyword. This is because const declares a block-scoped, read-only named constant. Meanwhile let declares a block-scoped, local variable, optionally initializing it to a value. In laymans terms use const if you are not going to update or change the variable and use let if you are going to update or change the variable.

P.S. Using the var keyword is a es5 keyword and is not recommended since es6 introduced the let keyword as well as the const.

You can see the code in action here on codepen

HTML

<div>
    <h1><span id="thisone">1</span></h1>
    <button onclick="addOne()" type="submit">Button</button>
</div>

JavaScript(es6)

function addOne(){
    let foo = document.getElementById('thisone').innerHTML;
    foo++;
    document.getElementById('thisone').innerHTML = foo;
};

You can find more information about Javascript declarations here at Mozilla Developer Network.

Const Declaration (es6)

Let Declaration (es6)

Var Declaration (es5)

MDN also has really nice learning documentation.

Here is also a nice in article explaining ES6 In Depth: Const and let

Upvotes: 3

iams0nus
iams0nus

Reputation: 492

const keyword declares a constant value and hence cannot be modified using the ++ operator. use the let keyword instead of const to allow modification of the foo variable.

Upvotes: 3

Theorder
Theorder

Reputation: 769

Replace const with let, since you are reassigning/ updating a new value for foo

Upvotes: 2

Connor Brown
Connor Brown

Reputation: 175

The reason because your code doesn't work is in the doc:

const: Constants are block-scoped, much like variables defined using the let statement. The value of a constant can't be changed through reassignment, and it can't be redeclared.

Would also recommend changing from 'onclick' to 'onClick'

function addOne(){
    var foo = document.getElementById('thisone').innerHTML;
    foo++;
    document.getElementById('thisone').innerHTML = foo;
};
<div>
    <h1><span id="thisone">1</span></h1>
    <button onClick="addOne()" type="submit">Button</button>
</div>

Upvotes: 3

Pitto
Pitto

Reputation: 8579

Please put your script between the head tags or, at least, before the button.

Upvotes: 2

Related Questions