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.

javascriptjqueryhtmlcsscounter

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

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;
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The jQuery script is set to load exclusively on the homepage

Currently, I am utilizing the ScrollToFixed script to enable a floating sticky menu on scroll for my website's navigation. However, I have encountered an issue where it only seems to function properly on the front page and not on any other pages of th ...

jquerywordpress

Locating items within a complex array and identifying their corresponding positions

I recently found an interesting code snippet from a different question that allowed me to identify an object. However, I am now faced with the challenge of determining the position of that object within the array. Let's take a look at the example belo ...

javascript

Chrome is experiencing a rendering problem as a result of using @Font-Face

Having trouble with rendering in my Angular 4 application, similar to the issue outlined in this post about Angular 2 Chrome DOM rendering problems. Despite there being a solution provided in that post, I am still facing difficulties when navigating betwee ...

cssangularlessangular2-templateangular2-components

What is the best way to bring a background image to the forefront?

I am currently working on creating a list of "fake videos" which are essentially images with a play icon on them. My plan is to use the play icon as a background and bring it to the front of the image by adjusting the z-index. However, no matter what I try ...

css

JavaScript nested function scope loss issue is being faced

Could someone provide an explanation of the scope binding in this code snippet? window.name = "window"; object = { name: "object", method: function() { nestedMethod: function() { console.log(this.name); ...

javascriptbindingscope

Prevent the href from navigating to the next page when a doubleclick event listener is triggered

In my project, I am using an anchor tag that redirects to another page. However, if the user double clicks on it, I want to prevent the default behavior and stop the redirection. <a href="{location}">My Link</a> element.addEventListen ...

javascripthtmlhrefanchorevent-listener

Do styled components have the capability to perform calculations similar to SCSS?

Using SCSS, I have the power to work wonders with CSS: @for $i from 1 through $total-items { li:nth-child(#{$i}) { animation-delay: .25s * $i; } } I am currently developing a React App that utilizes styled components. Is it possible to achieve th ...

cssreactjssassstyled-components

Experiencing a problem with my JavaScript code in Node.js due to an asynchronous issue arising when using a timeout

My goal with this code is to retrieve JSON questions and present them to the user through the terminal. The user has 5 seconds to respond to each question before the next one appears. However, I encountered an issue where the next question times out automa ...

javascriptnode.jsreadline

Issue with JS jQuery: The click event on an li element within an expanded ul does not function properly

I have built a basic webpage to explore jQuery. However, there is an issue that arises when I click on the "Button: another one." It seems to interfere with the event of clicking on the li element, causing it to glitch and not respond. Here is the code: JS ...

javascriptjqueryhtmlhtml-lists

Which HTML tag should I choose to apply color to text in Twitter Bootstrap?

I'm looking to enhance the appearance of a specific word in my text. For example: This is my text, <span class="red">this</span> should be red. Would using the span tag be the appropriate method for achieving this effect? Or are there ot ...

htmlcsstwitter-bootstrap

Move the scroll bar outside of the div and set it to automatically overflow

My issue involves a small div with the CSS property overflow:auto;. However, when the scroll bar appears, it covers up a significant portion of the div. One possible solution is to use overflow:scroll;, but this can result in an unsightly faded scroll bar ...

htmlcss

The CSS styles are not being applied to the PHP code

I seem to have a tangled mess of CSS / PHP / HTML to deal with. The issue I'm facing is that something works on one PHP script but not the other. Here's a snippet of my code: <?php if ($daten->getData_DB_User($get_page_num) != fa ...

phphtmlcss

The AJAX request successfully retrieves data, but the page where it is displayed remains empty

I have come across similar questions to mine, but I have not been successful in implementing their solutions. The issue I am facing involves an AJAX call that is functioning correctly in terms of receiving a response. However, instead of processing the re ...

javascriptphpjqueryajax

Automatically copy any chosen selection on the page to the clipboard

Is there a way to copy any selection from a webpage to the clipboard, regardless of where it is located on the page (div, text input, password input, span, etc.)? I have created a function that can retrieve the selected text, but I am struggling with sett ...

javascripthtmldom

Images displaying correctly in Next.js development environment, but failing to load on Github Pages production site

I am currently using Next.js alongside Tailwind CSS and I'm encountering an issue while attempting to set a background image for a specific div. Oddly enough, the image appears to load correctly in development mode, but fails to display when deployed ...

htmlreactjsnext.jstailwind-cssgithub-pages

Animating a ThreeJS Mesh using the TweenMax scaling method

Having issues trying to implement a scaling translation to my mesh[0] using TweenMax. While other animations like rotation work fine, I encounter an 'Uncaught TypeError: Cannot assign to read only property 'scale' of object '#'&apo ...

javascriptthree.jsgsap

Swap out original source files in HTML with minified versions

I have successfully utilized a maven plugin to create a minified and compressed version of my CSS and JavaScript files. Now, I am looking to update the section in my main HTML page that currently loads all those individual files. Here is what it looks lik ...

javascriptcssmaven

Transmit JSON Data via POST Method and Retrieve Using Node.js (Without the Use of Body Parser)

Can anyone help me with sending JSON data from HTML and receiving it in Node.js? I've been trying for hours and I'm getting frustrated. It seems like I'm close to a solution but no luck so far. In my VSCODE, the response is null (req.body = ...

htmlnode.jsjsonsend

What is the best way to retrieve an ID when parsing JSON recursively?

Could you provide guidance on how to retrieve the IDs of all children when parsing JSON data? I have attempted to use a recursive function, but it seems to be calling infinitely. For reference, here is my code snippet: http://jsfiddle.net/Ds8vQ/ for(var ...

javascriptjqueryjson

Utilize custom fonts from your local directory within a Vite Vue3 project

Inside my main.scss file, I am loading local fonts from the assets/styles/fonts folder: @font-face { font-family: 'Opensans-Bold'; font-style: normal; src: local('Opensans-Bold'), url(./fonts/OpenSans-Bold.ttf) format('truety ...

cssvue.jsvuejs3vite