HTML Button not interacting with Javascript

Question

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.

gaetanoM · Accepted Answer · 2019-08-18 22:03:12Z

3

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>

edited Aug 18, 2019 at 22:03

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

answered Aug 18, 2019 at 21:53

Connor Brown

1756 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

iams0nus · Accepted Answer · 2019-08-18 22:08:47Z

3

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.

answered Aug 18, 2019 at 22:08

iams0nus

4923 silver badges8 bronze badges

Comments

w3Develops · Accepted Answer · 2019-08-19 00:15:16Z

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

Pitto · Accepted Answer · 2019-08-18 21:54:21Z

2

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

answered Aug 18, 2019 at 21:54

Pitto

8,6993 gold badges51 silver badges54 bronze badges

Comments

Theorder · Accepted Answer · 2019-08-18 22:05:11Z

2

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

answered Aug 18, 2019 at 22:05

Theorder

7893 gold badges10 silver badges19 bronze badges

Collectives™ on Stack Overflow

HTML Button not interacting with Javascript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related