Discussion :

[Jmeuh]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

[javatwister]

Bonjour,

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Jmeuh]

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

[GirkovArpa]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Juste une ligne de plus