[Javascript] intercettare tasto enter e lanciare una funzione

[Max Ichnusa]

ciao a tutti,

come da titolo, vorrei lanciare una funzione alla pressione del tasto enter: praticamente ho un form che viene compilato e con il tasto enter si dovrebbe lanciare una funzione (è una sorta di registratore di cassa, un esercizio che devo fare).

il codice funziona e l'ho verificato creando un bottone che lancia la funzione, ora vorrei eliminare il bottone e lanciare la funzione con il tasto invio, potete aiutarmi?

var result = 0;
var total = document.getElementById("total");
var newNumber = document.getElementById("newEntry");
var formImput = document.getElementById("entry");
var entries = document.getElementById("entries");


var addMyNumber = function() {
result = result + parseFloat(newNumber.value);
total.innerHTML = "$ " + result.toFixed(2);
writeNumber();
formImput.reset();

}

var writeNumber = function() {
entries.innerHTML += "$ " + document.getElementById("newEntry").value + "<br>";
}

var buttons = document.getElementsByTagName("button");
buttons[0].addEventListener("click", addMyNumber);

PS: ho intenzionalmente fatto tutto in puro Js, poi scriverò (proverò) lo stesso in JQuery. Sono un principiante che sta imparando il front end.
Quindi ora vorrei trovare la soluzione in Js puro... aiutino?

[Max Ichnusa]

nessuno che possa aiutarmi? ci sono sopra ore ma non ne vengo a capo anche se probabilmente è una fesseria

[wingman87]

Devi aggiungere un eventlistener per l'evento "keydown" o "keypress" a ogni tuo input.

[Max Ichnusa]

Originariamente inviato da wingman87

Devi aggiungere un eventlistener per l'evento "keydown" o "keypress" a ogni tuo input.

ci ho provato ma non ci sono riuscito, sbaglio probabilmente qualcosa nelle sintassi o dentro il tag imput nell'html o nel foglio js, dove non saprei proprio cosa mettere a snistra dell .addeventlistener, ho provato di tutto

[wingman87]

Hai provato così?

newNumber.addEventListener("keydown", function(e){
  if(e.keyCode == 13){
    addMyNumber();
  }
});

[Max Ichnusa]

Originariamente inviato da wingman87

Hai provato così?

newNumber.addEventListener("keydown", function(e){
  if(e.keyCode == 13){
    addMyNumber();
  }
});

provato ora e non va

[Max Ichnusa]

ho risolto inserendo questo codice (in grassetto) nel tag input dell'html:

 <form onsubmit="javascript:addMyNumber();return false;" id="entry">
    <input id="newEntry"  onBlur="isnum(this)" autofocus placeholder="How Much?" >
  </form>

però ora non mi funziona più un alta funzione che avevo messo per limitare l'inserimento nel form di soli caratteri numerici (in grassetto) che prima, con il button, funzionava.

var result = 0;
var total = document.getElementById("total");
var newNumber = document.getElementById("newEntry");
var formInput =  document.getElementById("entry");
var entries = document.getElementById("entries");

// Alert function, past and copy from google XD

function isnum(obj) {
if (isNaN(obj.value) || parseFloat(obj.value)<0 || parseFloat(obj.value) > 99999999)
{
alert('Hey, only number please!!!');
obj.value="";
obj.focus();
}
}

// End alert function

var addMyNumber = function() {
	result = result + parseFloat(newNumber.value);
	total.innerHTML = "$ " + result.toFixed(2);
	writeNumber();
	formInput.reset();

}

var writeNumber = function() {
	entries.innerHTML += "$ " + document.getElementById("newEntry").value + "<br>";
}

[OoZic]

Consiglio per il futuro sempre creare un jsfiddle per far capire meglio la tua situazione e di conseguenza e' piu semplice aiutarti

http://jsfiddle.net/qphzgf44/2/

HTML

<form id="form0">
    <input id="input0" placeholder="How Much?" />
</form>

JS

var result = 0;
var input = document.getElementById("input0");
var form = document.getElementById("form0");


form.addEventListener("submit", function (e) {
    e.preventDefault();
});

input.addEventListener("keydown", function (e) {
    if (e.keyCode == 13) {
        addMyNumber();
    }
});


var addMyNumber = function () {
    window.alert('fai qualcosa con addMyNumber');
}

[Max Ichnusa]

Originariamente inviato da OoZic

Consiglio per il futuro sempre creare un jsfiddle per far capire meglio la tua situazione e di conseguenza e' piu semplice aiutarti

http://jsfiddle.net/qphzgf44/2/

HTML

<form id="form0">
    <input id="input0" placeholder="How Much?" />
</form>

JS

var result = 0;
var input = document.getElementById("input0");
var form = document.getElementById("form0");


form.addEventListener("submit", function (e) {
    e.preventDefault();
});

input.addEventListener("keydown", function (e) {
    if (e.keyCode == 13) {
        addMyNumber();
    }
});


var addMyNumber = function () {
    window.alert('fai qualcosa con addMyNumber');
}

grazie a entrambi per gli aiuti e la disponibilità.

Sono un principiante e non conoscevo jsfiddle.