Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

396
Visualizações
how to decrease or increase a number bu pressing the button Java script

Hey guys i've made buttons of '+' and '-' and there is a number which i need to increase or decrease while pressing the + or -, here my code but it isn't working. Will be glad if you can help me.

thank you!

button class="plus_minus"></button><span class="number">1</span><button class="minus_plus"></button>

my JS

const plus = document.querySelector('.plus_minus'),minus = document.querySelector('.minus_plus');

let number = parseInt(document.querySelector('.number'));

plus.addEventListener('click',() => {number++ ;});

minus.addEventListener('click',() => {number--;

});
about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

Anyway, I would suggest this:

HTML :

<button class="minus">-</button><span id="number">1</span><button class="plus">+</button>

One class for "minus" button and one class for "plus" button. In your code you didn't differenciate them.

JS:

const minus = document.querySelector('.minus')
const plus = document.querySelector('.plus');

plus.addEventListener('click',() => document.getElementById("number").textContent++);

minus.addEventListener('click',() => document.getElementById("number").textContent--);

Add two listeners that directly increment/decrement the value.

about 4 years ago · Juan Pablo Isaza Relatório

0

Right now you number variable is reference of the span element. You should get the value (innerHTML) of that

let number = parseInt(document.querySelector('.number').innerHTML);

In the event listener you should update the DOM (innertHTML of span) again after the value is updated.

    plus.addEventListener('click',() => {
     number++ ;
     document.querySelector('.number').innerHTML = number;
    });

    minus.addEventListener('click',() => {
     number--;
     document.querySelector('.number').innerHTML = number;
    });
about 4 years ago · Juan Pablo Isaza Relatório

0

I updated your code and it will help you.

let number = parseInt(document.querySelector('.number'));

document.querySelector('.number') returns element with "number" classname , not it's content text. document.querySelector('.number').innerText returns the element's content text.

let oldVal = 1;
let newVal = oldVal++;
// output: newVal = 1    oldVal = 2
let oldVal = 1;
let newVal = ++oldVal;
// output: newVal = 2    oldVal = 2

const plus = document.querySelector('.plus_minus'),
  minus = document.querySelector('.minus_plus');

let number_el = document.querySelector('.number');

plus.addEventListener('click', () => {
  let val = parseInt(number_el.innerText);
  number_el.innerText = ++val;
});

minus.addEventListener('click', () => {
  let val = parseInt(number_el.innerText);
  number_el.innerText = --val;
});
<button class="plus_minus">+</button>
<span class="number">1</span>
<button class="minus_plus">-</button>

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda