Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 13

Discussione: Aumentare il prezzo ad ogni lettera cliccata sulla tastiera

  1. #1
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    8

    Aumentare il prezzo ad ogni lettera cliccata sulla tastiera

    Ciao, avrei bisogno urgentemente di un vostro prezioso aiuto.
    Sto programmando un sito di abbigliamento con possibilità di ricamo sul tessuto, e vorrei che il prezzo di ogni singolo prodotto, possa aumentare di 5 euro, ad ogni lettera della tastiera digitata. Sono riuscito a fare ciò con javascript, grazie alla funzione keydown, il prezzo me lo aumenta, solo che ci sono 2 problemi:

    1- L'aumento avviene cliccando ogni pulsante della tastiera, ed invece io vorrei che ciò avvenisse soltanto per le lettere dell'alfabeto.

    2- Vorrei che cliccando il pulsante BACKSPACE, della tastiera, quindi effettuando la cancellazione delle lettere, si verificasse a sua volta, la diminuzione del prezzo di 5 euro. Quindi in caso di cancellazione delle lettere, il prezzo ritornasse alla cifra iniziale. Quindi aumento di 5 euro ad ogni lettera digitata, diminuzione di 5 euro ogni volta che cancello la lettera.

    Spero di essere stato chiaro, non è semplice da spiegare. Grazie in anticipo
    Ultima modifica di robfori; 31-01-2018 a 00:29

  2. #2
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,484
    Ciao, due facili soluzioni potrebbero essere:
    - controllare che tasto è stato premuto : https://developer.mozilla.org/it/doc...PI/Event/which
    - contare semplicemente la lunghezza della parola inserita e moltiplicare x 5 https://www.w3schools.com/jsref/jsref_length_string.asp

    Ovviamente se dovrai rendere possibili solo certi caratteri dovrai metterci di mezzo un controllo dedicato.

  3. #3
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    8
    Quote Originariamente inviata da m4rko80 Visualizza il messaggio
    Ciao, due facili soluzioni potrebbero essere:
    - controllare che tasto è stato premuto : https://developer.mozilla.org/it/doc...PI/Event/which
    - contare semplicemente la lunghezza della parola inserita e moltiplicare x 5 https://www.w3schools.com/jsref/jsref_length_string.asp

    Ovviamente se dovrai rendere possibili solo certi caratteri dovrai metterci di mezzo un controllo dedicato.

    Grazie mille per la risposta rapida. Potresti farmi un esempio pratico? Perché io ho provato ma non mi funziona, probabilmente perché sono ancora inesperto con javascript, é da poco che lo sto studiando. Allora calcola che il prezzo sarà 95€, dovrà aumentare di 5€ alla pressione di una qualsiasi lettera o numero (il resto dei pulsanti della tastiera non dovranno contare soltanto il tasto BACKSPACE per cancellare) all'interno di un campo input type=text e con la possibilità che cancellando la lettera, il prezzo ovviamente diminuisca di 5€, quindi premendo il tasto BACKSPACE. Grazie anticipatamente

  4. #4
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,484
    Questo esempio bene o male dovrebbe far tutto, presumendo possa accetare solo lettere numeri.
    codice:
    <html>
    <head>
    <script>
    var unit = 5;
    var min = 0;
    var currentValue;
    var currentText;
    
    
    window.onLoad = function(){
     currentValue = document.getElementById('valore').value || 0;
     currentText = document.getElementById('testo').value;
    }
    
    
    function calcola(event){
       
    	var key = event.which || event.keyCode;  
    
    
    	var inp = String.fromCharCode(key);
    	if (/[a-zA-Z0-9]/.test(inp) || (key==8)){ //Tasti accettati : lettere e numeri
    		currentText = document.getElementById('testo').value;
    		 console.log(key, document.getElementById('testo').value.length)
    	   	var newValue = document.getElementById('testo').value.length * 5;	
    	   	document.getElementById('valore').value = newValue;	   	
    	}else{
    		//caratteri non consentiti = reset testo
    		document.getElementById('testo').value = currentText;
    	}
      
    
    
    </script>
    </head>
    <body>
    Testo <input type="text" id="testo" value="" onKeyup="javascript:calcola(event);"/>
    Valore <input type="text" id="valore" value="0">
    </body>
    </html>

  5. #5
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    8
    Quote Originariamente inviata da m4rko80 Visualizza il messaggio
    Questo esempio bene o male dovrebbe far tutto, presumendo possa accetare solo lettere numeri.
    codice:
    <html>
    <head>
    <script>
    var unit = 5;
    var min = 0;
    var currentValue;
    var currentText;
    
    
    window.onLoad = function(){
     currentValue = document.getElementById('valore').value || 0;
     currentText = document.getElementById('testo').value;
    }
    
    
    function calcola(event){
       
        var key = event.which || event.keyCode;  
    
    
        var inp = String.fromCharCode(key);
        if (/[a-zA-Z0-9]/.test(inp) || (key==8)){ //Tasti accettati : lettere e numeri
            currentText = document.getElementById('testo').value;
             console.log(key, document.getElementById('testo').value.length)
               var newValue = document.getElementById('testo').value.length * 5;    
               document.getElementById('valore').value = newValue;           
        }else{
            //caratteri non consentiti = reset testo
            document.getElementById('testo').value = currentText;
        }
      
    
    
    </script>
    </head>
    <body>
    Testo <input type="text" id="testo" value="" onKeyup="javascript:calcola(event);"/>
    Valore <input type="text" id="valore" value="0">
    </body>
    </html>
    Grazie, soltanto che non mi funziona, ovvero non aumenta il valore, anzi mi dice "
    È stato rilevato un errore di sintassi nella riga 33. È possibile che i suggerimenti sul codice non funzionino finché l’errore non viene corretto."

    Inoltre utilizzerò simply cart come plugin per il carrello, e quindi il prezzo mi si presenterà cosi
    <span class="item_price" style="display:none;">95.00€</span>
    è questo che dovrà aumentare di 5€ oppure diminuire di 5€ nel caso si cancelli la lettera precedentemente premuta all'interno di input text.

    Grazie ancora
    Ultima modifica di robfori; 31-01-2018 a 19:03

  6. #6
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,484
    Mancava una graffa al codice(funziona calcola)
    codice:
    <html>
    <head>
    <script>
    var unit = 5;
    var min = 0;
    var currentValue;
    var currentText;
    
    
    
    
    window.onLoad = function(){
     currentValue = document.getElementById('valore').value || 0;
     currentText = document.getElementById('testo').value;
    }
    
    
    
    
    function calcola(event){
       
        var key = event.which || event.keyCode;  
    
    
    
    
        var inp = String.fromCharCode(key);
        if (/[a-zA-Z0-9]/.test(inp) || (key==8)){ //Tasti accettati : lettere e numeri
            currentText = document.getElementById('testo').value;
             console.log(key, document.getElementById('testo').value.length)
               var newValue = document.getElementById('testo').value.length * 5;    
               document.getElementById('valore').value = newValue;           
        }else{
            //caratteri non consentiti = reset testo
            document.getElementById('testo').value = currentText;
        }
      }
    
    
    
    
    </script>
    </head>
    <body>
    Testo <input type="text" id="testo" value="" onKeyup="javascript:calcola(event);"/>
    Valore <input type="text" id="valore" value="0">
    </body>
    </html>
    Il codice a se stante funziona, manca la gestione per il testo, il quale comprende il caratter euro o meno.
    Il fatto che stia in un plugin è già più complesso, se devi modificare un plugin potrebbe essere legato ad altro ma non posso vedere e avere idea di cosa ci sia dietro.

    Da questo esempio bene o male puoi farti un'idea di come continuare.

  7. #7
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    8
    Quote Originariamente inviata da m4rko80 Visualizza il messaggio
    Mancava una graffa al codice(funziona calcola)
    codice:
    <html>
    <head>
    <script>
    var unit = 5;
    var min = 0;
    var currentValue;
    var currentText;
    
    
    
    
    window.onLoad = function(){
     currentValue = document.getElementById('valore').value || 0;
     currentText = document.getElementById('testo').value;
    }
    
    
    
    
    function calcola(event){
       
        var key = event.which || event.keyCode;  
    
    
    
    
        var inp = String.fromCharCode(key);
        if (/[a-zA-Z0-9]/.test(inp) || (key==8)){ //Tasti accettati : lettere e numeri
            currentText = document.getElementById('testo').value;
             console.log(key, document.getElementById('testo').value.length)
               var newValue = document.getElementById('testo').value.length * 5;    
               document.getElementById('valore').value = newValue;           
        }else{
            //caratteri non consentiti = reset testo
            document.getElementById('testo').value = currentText;
        }
      }
    
    
    
    
    </script>
    </head>
    <body>
    Testo <input type="text" id="testo" value="" onKeyup="javascript:calcola(event);"/>
    Valore <input type="text" id="valore" value="0">
    </body>
    </html>
    Il codice a se stante funziona, manca la gestione per il testo, il quale comprende il caratter euro o meno.
    Il fatto che stia in un plugin è già più complesso, se devi modificare un plugin potrebbe essere legato ad altro ma non posso vedere e avere idea di cosa ci sia dietro.

    Da questo esempio bene o male puoi farti un'idea di come continuare.
    Per farti capire meglio provo a pubblicarti il codice in questione:

    Per farti capire, in pratica va bene così come mi hai fatto vedere, soltanto che vorrei che aumentasse la cifra del prezzo, non il value. Ti pubblico il codice attuale:

    <!doctype html>
    <html>
    <head>
    <script>
    var unit = 5;
    var min = 0;
    var currentValue;
    var currentText;


    window.onLoad = function(){
    currentValue = document.getElementById('item_price').value || 0;
    currentText = document.getElementById('ricamo').value;
    }


    function calcola(event){

    var key = event.which || event.keyCode;

    var inp = String.fromCharCode(key);
    if (/[a-zA-Z0-9]/.test(inp) || (key==8)){ //Tasti accettati : lettere e numeri
    currentText = document.getElementById('ricamo').value;
    console.log(key, document.getElementById('ricamo').value.length)
    var newValue = document.getElementById('ricamo').value.length * 5;
    document.getElementById('item_price').value = newValue;
    }else{
    //caratteri non consentiti = reset testo
    document.getElementById('ricamo').value = currentText;
    }
    }
    </script>
    </head>


    <body>

    <font>5€ a lettera</font>
    <input type="text" class="ricamo"> <br>

    <span class="item_price">95.00€</span>

    <a class="item_add" href="javascript:;"><input type="submit" value="AGGIUNGI AL CARRELLO" class="add_to_cart"></a>

    </div>
    </form>
    </body>
    </html>

    Grazie al tuo esempio, riesco ad aumentare il value, soltanto che io vorrei che aumentasse la cifra , ovvero il prezzo dell' item_price.

    So che non è facile da spiegare..

  8. #8
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    8
    Io avevo fatto in questo modo, ma come vedete, si verificano 4 problemi:

    <!doctype html>
    <html>
    <head>
    <script type="text/javascript">
    var x=95.00;
    function incrementa() {
    document.getElementsByClassName('item_price')[0].innerHTML = ++x;
    x=x+5.00;
    }
    function decrementa() {
    document.getElementsByClassName('item_price')[0].innerHTML = --x;
    x=x-5.00;
    note.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Backspace") {
    x=x-5.00;
    }
    });
    }
    function azzera() {
    document.getElementsByClassName('item_price')[0].innerHTML = 95.00;
    }
    </script>
    </head>
    <body>
    <br><br><font style="font-family:'medium'; font-size:12px; color:black;">5€ a lettera</font>
    <input type="text" name="ricamo" onKeyDown="incrementa(x)" class="ricamo"> <br>
    <span class="item_price" style="font-family:'bold'; color:#b17f4a; font-size:30px; position:absolute; top:12%; left:5%;">95</span>
    </div>
    </form>
    </body>
    </html>


    1- La cifra aumenta premendo tutti i pulsanti della tastiera, invece io vorrei che aumentasse solo con lettere e numeri.
    2- Con il pulsante BACKSPACE, il valore non diminuisce, ma aumenta, invece io vorrei che diminuisse.
    3- Alla pressione del primo pulsante, aumenta solo di 1 e poi aumenta di 6, quindi non di 5 come vorrei, non capisco perchè.
    4- Vorrei che cancellando completamente il testo, la cifra ritornasse al valore iniziale, quindi in questo caso a 95.

    Detto questo, spero possiate aiutarmi, perchè sarebbe fondamentale per me, ho provato in tutti i modi senza successo.
    Grazie
    Ultima modifica di robfori; 01-02-2018 a 12:54

  9. #9
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    8
    Quote Originariamente inviata da robfori Visualizza il messaggio
    Io avevo fatto in questo modo, ma come vedete, si verificano 4 problemi:

    <!doctype html>
    <html>
    <head>
    <script type="text/javascript">
    var x=95.00;
    function incrementa() {
    document.getElementsByClassName('item_price')[0].innerHTML = ++x;
    x=x+5.00;
    }
    function decrementa() {
    document.getElementsByClassName('item_price')[0].innerHTML = --x;
    x=x-5.00;
    note.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Backspace") {
    x=x-5.00;
    }
    });
    }
    function azzera() {
    document.getElementsByClassName('item_price')[0].innerHTML = 95.00;
    }
    </script>
    </head>
    <body>
    <br><br><font style="font-family:'medium'; font-size:12px; color:black;">5€ a lettera</font>
    <input type="text" name="ricamo" onKeyDown="incrementa(x)" class="ricamo"> <br>
    <span class="item_price" style="font-family:'bold'; color:#b17f4a; font-size:30px; position:absolute; top:12%; left:5%;">95</span>
    </div>
    </form>
    </body>
    </html>


    1- La cifra aumenta premendo tutti i pulsanti della tastiera, invece io vorrei che aumentasse solo con lettere e numeri.
    2- Con il pulsante BACKSPACE, il valore non diminuisce, ma aumenta, invece io vorrei che diminuisse.
    3- Alla pressione del primo pulsante, aumenta solo di 1 e poi aumenta di 6, quindi non di 5 come vorrei, non capisco perchè.
    4- Vorrei che cancellando completamente il testo, la cifra ritornasse al valore iniziale, quindi in questo caso a 95.

    Detto questo, spero possiate aiutarmi, perchè sarebbe fondamentale per me, ho provato in tutti i modi senza successo.
    Grazie
    Nessuno puoi aiutarmi?

  10. #10
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    28,219
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.