onchange sur INPUT modifié par javascript

Version imprimable

Bonjour à tous,

Je dois récupérer la valeur d'un input modifiée par JS mais ça ne fonctionne pas.

voici un exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <input id="n" type="number" value='1'> <button type="button" id="p" name="button">+10</button> <div class="result"></div> <script type="text/javascript"> const selectElement = document.getElementById('n') const plus = document.getElementById('p') plus.addEventListener('click', (event) => { selectElement.value = parseInt(selectElement.value) + 10 }) selectElement.addEventListener('change', (event) => { const result = document.querySelector('.result') result.textContent = event.target.value })
Si je change directement la valeur du input la fonction 'change' s'exécute mais pas avec le bouton +10

Quelqu'un à la solution?

Bonjour,

Quand tu interviens sur le button, aucun événement n'est déclenché sur l'input;
donc, tu dois doubler l'instruction:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
const selectElement = document.getElementById('n'),
plus = document.getElementById('p'),
result = document.querySelector('.result');
 
plus.addEventListener('click', (event) => {
  selectElement.value = parseInt(selectElement.value) + 10
  result.textContent = selectElement.value
})
 
selectElement.addEventListener('change', (event) => {
  result.textContent = event.target.value
})

31/03/2021, 17h11
Jmeuh

Et bien sûr c'était tout con
Merci ! beaucoup !

Sans doubler l'instruction, tu peux déclencher manuellement l'événement de « change »:
Code:

1 2 3 4 plus.addEventListener('click', (event) => { selectElement.value = parseInt(selectElement.value) + 10 selectElement.dispatchEvent(new Event('change')) })
Juste une ligne de plus 8-)