Increase and decrease a counter in Javascript by clicking on two separate image tags, with increments and decrements between 1 and 10

Question

Increase and decrease a counter in Javascript by clicking on two separate image tags, with increments and decrements between 1 and 10

Hello! I really appreciate your help. I am currently facing the following issue:

<div id="thumb1">
                <img class="img-responsive"  id="prova" src="img/thumb-up-dark.png" alt="">
                <div id="pinline">0</div>  
                <img class="img-responsive"  src="img/thumb-down-dark.png" alt="">
            </div>

I need to increase the value in "pinline" after each click until it reaches 10;

In order to achieve this, I tried the following code:

$("#prova").click(function(){

    var value = parseInt(document.getElementById('pinline').value, 10);
    value++;
    document.getElementById('pinline').innerHTML = value;

});

But unfortunately, it keeps returning "Nan". Could you please provide some guidance on how to fix this? Your assistance is greatly appreciated!

Thank you so much for your time and support.

javascript jquery html css counter

Answer 1

Answer №1

This field does not accept input, therefore the use of .value is not applicable in this context.

Instead, you can retrieve the value using:

var value = parseInt(document.getElementById('pinline').innerHTML, 10);

Answer 2

This field does not accept input, therefore the use of .value is not applicable in this context.

Instead, you can retrieve the value using:

var value = parseInt(document.getElementById('pinline').innerHTML, 10);

Answer 3

Answer №2

Your needs will be met perfectly with this solution

$("#example").click(function(){

    var number = parseInt(document.getElementById('numline').innerHTML, 10);
    if(number < 10){
        number++;
        document.getElementById('numline').innerHTML = number;
    }
});

Answer 4

Your needs will be met perfectly with this solution

$("#example").click(function(){

    var number = parseInt(document.getElementById('numline').innerHTML, 10);
    if(number < 10){
        number++;
        document.getElementById('numline').innerHTML = number;
    }
});

Increase and decrease a counter in Javascript by clicking on two separate image tags, with increments and decrements between 1 and 10

Answer №1

Answer №2

Similar questions

The jqGrid colModel is failing to execute a function as expected

Basic color scheme

Unable to populate an array with a JSON object using Angular framework

Over time (a few days), the setInterval function causes the react app to become unresponsive

The concept of Theme.breakpoints does not exist in MUI React, there is

Performing an Ajax post request to a PHP script in order to retrieve a PHP variable using XMLHttpRequest

Material-UI - Switching thumb styles in a range slider

Retrieving details of a row in Codeigniter using a link with a foreach loop

There is a space separating the slider image and the navigation bar

Creating effective test cases for Angular JS controllers

Executing JavaScript code from an external HTML file

Server Error: Reactjs doesn't support posting images

What could be the reason behind the malfunctioning of a custom filter in this specific Vue 3 application?

Attention: React is unable to identify the `pId` property on a DOM element

Debugging TypeScript on a Linux environment

Sending data to API using AngularJS Http Post

Could you walk me through the details of this React function?

Navigating JSON data to retrieve a specific property in AngularJS using a select form

Unable to load routes from ./app.js in the file ./src/routes/index.js

Is it possible to reorganize the order of elements in a