(Editar: arriba)
Primero soy un principiante de JS. Necesito hacer un cálculo usando tanto el número de tipo de entrada como los botones más/menos vinculados a él (para reemplazar los botones giratorios en las pantallas de los teléfonos inteligentes). Preciso que no puedo usar JQuery ni ninguna otra biblioteca externa.
Me enfrento a 3 problemas:
He pasado horas y horas intentando solucionarlo... gracias de antemano.
Aquí está el código:
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>title</title> <style> .result { width: 5rem; height: 2.5rem; background-color: grey; } </style> </head> <body> <form name="myForm"> <div class="result"> <output id="output"></output> </div> <div> <input type="button" value="-" id="decreaseMe"> <input type="number" id="saisie"> <input type="button" value="+" id="increaseMe"> </div> </form> <script> var valeur = 10; var varSaisie = document.querySelector('#saisie'); var varOutput = document.querySelector('#output'); myForm.addEventListener('input', function () { decreaseMe.addEventListener('click', function(){ varSaisie.value = --varSaisie.value; }); increaseMe.addEventListener('click', function(){ if(varSaisie.value === "") { varSaisie.value = 0; } varSaisie.value = ++varSaisie.value; }); varOutput.value = parseFloat(varSaisie.value) + parseFloat(valeur); }, false); </script> </body> </html>Parece que algo está impidiendo que el clic llegue al botón más. No deberías tener que concentrarte en él para que funcione. podría estar detrás de algo. intente moverlo para que sea el elemento superior de la página agregando este estilo a la página:
<style> #increaseMe { z-index:99; } </style>Por favor comente si esto solucionó este problema.
Finalmente he encontrado la solución. Lo comparto por si es de utilidad para la comunidad. No estoy seguro de que sea la mejor práctica, pero hace el trabajo.
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Formulaire avec boutons plus moins</title> <style> .result { width: 5rem; height: 2.5rem; background-color: grey; } </style> </head> <body> <form name="myForm"> <div class="result"> <output id="output"></output> </div> <div> <input type="button" value="-" id="decreaseMe"> <input class=boxnumber type="number" id="saisie" min="0" max="95" step="1" placeholder="0-95"> <input type="button" value="+" id="increaseMe"> </div> </form> <script> var valeur = 10; var varSaisie = document.querySelector('#saisie'); var varOutput = document.querySelector('#output'); myForm.addEventListener('input', function(){ myResult(); }); decreaseMe.addEventListener('click', function(){ varSaisie.value = --varSaisie.value; myResult(); }); increaseMe.addEventListener('click', function(){ varSaisie.value = ++varSaisie.value; myResult(); }); function myResult() { varOutput.innerHTML = parseFloat(varSaisie.value) + parseFloat(valeur); } </script> </body> </html>