Transformare le virgole (,) in punti (.)

[jeyjack]

Ciao a tutti, ho un quesito:
è possibile fare in modo che tutte le virgole contenute in campi <input> siano trasformati da virgole (,) a (.)?

Ho generato un calcolatore transformandolo da excel tramite un plugin in javascript, però vorrei far in modo che al posto di avere delle virgole, ci siano dei punti. Magari la cosa è più semplice di quello che credo ma non vi nascondo che sono un pò arrugginito su questo tipo di situazioni per questo chiedo il vostro supporto.

Ecco il calcolatore:


In allegato il codice html del calcolatore contenenti i vari campi <input> e il file javascript zippato.

Come vedete ci sono diversi campi <input>, alcuni editabili e alcuni non editabili che sono aggiornati in automatico dal calcolatore.

Qualcuno ha qualche idea di come potrei risolvere?

[ninja72]

Potresti catturare gli input in una variabile tramite una querySelectorAll per poi trasformarla in array con Array.from(), iterando il tutto con un forEach ogni valore iterato rappresenta l'input, dunque per sostituire la virgola con il punto non devi fare altro che :

input.value = input.value.replace(',','.')

[jeyjack]

Potresti catturare gli input in una variabile tramite una querySelectorAll per poi trasformarla in array con Array.from(), iterando il tutto con un forEach ogni valore iterato rappresenta l'input, dunque per sostituire la virgola con il punto non devi fare altro che :

input.value = input.value.replace(',','.')

ok Scusa l'ignoranza, quindi il codice andrebbe inserito nello javascript corretto? All'inizio?
Tenendo conto che questa è la parte iniziale del codice che mi è stato generato, dove glie lo dovrei inserire? Con Javascript sono quasi a 0..

/*! jQuery v3.3.1 | (c) JS Foundation and other contributors | jquery.org/license */
!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):f unction(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(e,t){"use strict";var n=[],r=e.document,i=Object.getPrototypeOf,o=n.slice,a= n.concat,s=n.push,u=n.indexOf,l={},c=l.toString,f= l.hasOwnProperty,p=f.toString,d=p.call(Object),h={ },g=function e(t){return"function"==typeof t&&"number"!=typeof t.nodeType},y=function e(t){return null!=t&&t===t.window},v={type:!0,src:!0,noModule: !0};function m(e,t,n){var i,o=(t=t||r).createElement("script");if(o.text=e,n )for(i in v)n[i]&&(o[i]=n[i]);t.head.appendChild(o).parentNode.removeChild(o)} function x(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?l[c.call(e)]||"object":typeof e}var b="3.3.1",w=function(e,t){return new w.fn.init(e,t)},T=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;w.fn=w.prototype={jquery:"3.3.1",constructor:w,l ength:0,toArray:function(){return o.call(this)},get:function(e){return null==e?o.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=w.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return w.each(this,e)},map:function(e){return this.pushStack(w.map(this,function(t,n){return e.call(t,n,t)}))},slice:function(){return this.pushStack(o.apply(this,arguments))},first:fun ction(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(n>=0&&n<t?[this[n]]:[])},end:function(){return this.prevObject||this.constructor()},push:s,sort:n .sort,splice:n.splice},w.extend=w.fn.extend=functi on(){var e,t,n,r,i,o,a=arguments[0]||{},s=1,u=arguments.length,l=!1;for("boolean"==ty peof a&&(l=a,a=arguments[s]||{},s++),"object"==typeof a||g(a)||(a={}),s===u&&(a=this,s--);s<u;s++)if(null!=(e=arguments[s]))for(t in e)n=a[t],a!==(r=e[t])&&(l&&r&&(w.isPlainObject(r)||(i=Array.isArray(r) ))?(i?(i=!1,o=n&&Array.isArray(n)?n:[])=n&&w.isPlainObject(n)?n:{},a[t]=w.extend(l,o,r)):void 0!==r&&(a[t]=r));return a},w.extend({expando:"jQuery"+("3.3.1"+Math.random ()).replace(/\D/g,""),isReady:!0,error:function(e){throw new Error(e)},noop:function(){},isPlainObject:function (e){var t,n;return!(!e||"[object Object]"!==c.call(e))&&(!(t=i(e))||"function"==typeof(n=f .call(t,"constructor")&&t.constructor)&&p.call(n)= ==d)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},globalEval:function(e){m(e)}, each:function(e,t){var n,r=0;if(C(e)){for(n=e.length;r<n;r++)if(!1===t.ca ll(e[r],r,e[r]))break}else for(r in e)if(!1===t.call(e[r],r,e[r]))break;return e},trim:function(e){return null==e?""e+"").replace(T,"")},makeArray:function(e,t){var n=t||[];return null!=e&&(C(Object(e))?w.merge(n,"string"==typeof e?[e]:e):s.call(n,e)),n},inArray:function(e,t,n){return null==t?-1:u.call(t,e,n)},merge:function(e,t){for(var n=+t.length,r=0,i=e.length;r<n;r++)e[i++]=t[r];return e.length=i,e}

I campi input su cui vorrei agire sono i seguenti: input id='XLEW_1_2_2', 'XLEW_1_3_3', 'XLEW_1_4_2', 'XLEW_1_4_3', XLEW_1_6_3, ‘XLEW_1_10_3’ e ‘XLEW_1_11_3’ ?

[ninja72]

Mettere mano al bundle minificato è da pazzi, conviene fare uno script custom che si esegue subito dopo.

 <script src="app.min.js"></script>
    <script>
        window.addEventListener('load', () => {
            const inputOnchange = document.querySelectorAll('input[onchange]')
            const inputReadonly = document.querySelectorAll('input[readonly]')

            function fixReadOnly() {
                Array.from(inputReadonly).forEach(input => {
                    input.value = String(input.value).replace(',', '.')
                    input.value = Number(input.value).toFixed(2)
                })
            }
            function formatInput(e) {
                fixReadOnly()
                e.target.value = String(e.target.value).replace(',', '.')
            }
            Array.from(inputOnchange).forEach(input => {
                input.addEventListener('change', formatInput)
                input.value = String(input.value).replace(',', '.')
                fixReadOnly()
            })
        })

    </script>

[KillerWorm]

Ciao, giusto un'idea, perché invece non risolvere il problema a monte?

Il file excel è tuo? puoi modificarlo?
In tal caso, dalle impostazioni avanzate di excel, puoi specificare di usare il punto come separatore decimale, quindi salvare/esportare il file con i valori nel formato corretto prima di darlo in pasto al plugin o quel che è.

Hai già valutato questa possibilità?

[jeyjack]

Mettere mano al bundle minificato è da pazzi, conviene fare uno script custom che si esegue subito dopo.

 <script src="app.min.js"></script>
    <script>
        window.addEventListener('load', () => {
            const inputOnchange = document.querySelectorAll('input[onchange]')
            const inputReadonly = document.querySelectorAll('input[readonly]')

            function fixReadOnly() {
                Array.from(inputReadonly).forEach(input => {
                    input.value = String(input.value).replace(',', '.')
                    input.value = Number(input.value).toFixed(2)
                })
            }
            function formatInput(e) {
                fixReadOnly()
                e.target.value = String(e.target.value).replace(',', '.')
            }
            Array.from(inputOnchange).forEach(input => {
                input.addEventListener('change', formatInput)
                input.value = String(input.value).replace(',', '.')
                fixReadOnly()
            })
        })

    </script>

Innanzi tutto grazie. Inserendo lo script come da te consigliato, una volta che inizio ad inserire altri numeri il calcolatore si comporta bene avendo dei punti al posto delle virgole, solo che allo stato iniziale se non inserisco alcun numero, il calcolatore me lo ritrovo cosi:



Come vedi ci sono dei campi che appaiono subito con il punto all'apertura, sono quelli a cui ho modificato il valore iniziale nell'html, cioè "Strong", "Decent", "Weak" e "Starting PR". Ma ciò non avviene per i campi "equiv. white balls" e "Final Pr" che vengono calcolati fin dall'apertura del calcolatore. Come potrei fare per fargli applicare i punti fin dall'apertura?

Ciao, giusto un'idea, perché invece non risolvere il problema a monte?

Il file excel è tuo? puoi modificarlo?
In tal caso, dalle impostazioni avanzate di excel, puoi specificare di usare il punto come separatore decimale, quindi salvare/esportare il file con i valori nel formato corretto prima di darlo in pasto al plugin o quel che è.

Hai già valutato questa possibilità?

è una possibilità che devo valutare e prendere in considerazione, ti dico che purtroppo ho utilizzato un plugin di excel che ti permette di trasformarlo in HTML\Javascript in versione trial e temo mi sia scaduto, rimetterò mani al pc con il plugin venerdi.. Controllerò se è scaduto o se riesco ancora a mettere mani all'excel per transformarlo nuovamente.. In caso contrario l'unica soluzione sarà agire con lo script come sto facendo. Non ho trovato null'altro se non questo plugin che mi permettesse di ottenere un calcolatore cosi fedele all'excel e che sono riuscito a integrare perfettamente nella mia pagina.

[ninja72]

Strano a me funziona sia su firefox che su chrome ed edge, se hai il progetto su qualche repository postalo.

[jeyjack]

Strano a me funziona sia su firefox che su chrome ed edge, se hai il progetto su qualche repository postalo.

La motivazione potrebbe essere che è contenuto in un "tab" espandibile? Comunque l'ho pubblicato qui: LINK
il calcolatore si trova nell'ultimo tab "META" (sotto sotto) e bisogna poi cliccare su "Cumulative case" per mostrare il Calcolatore

[ninja72]

La motivazione è abbastanza semplice, tu posizioni gli script nell'head mentre dovresti posizionarli prima della chiusura del tag body, ho provato anche applicando defer sullo script ma ovvimanete senza successo, questo perchè all'interno del tuo html utilizzi dei richiami a script tramite onchange, questi possono essere sovrascritti solo applicando le modifiche che ti ho detto.

Inoltre non capisco perchè richiami due volte gli stessi script nell'head :

window.addEventListener("DOMContentLoaded", e => {
  // Original JavaScript code by Chirp Internet: chirpinternet.eu
  // Please acknowledge use of this code by including this header.
....}

<script type="text/javascript" src="assets/js/app.min.js">
<script src="app.min.js">

In pratica hai copiato alla lettera il mio codice, ma dovevi prendere lo script della tua libreria app.min.js solo come esempio, visto che nel tuo html è già presente, in questo caso devi solo spostarli prima della chiusura del tag body per ottenere una cosa simile a:

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
</head>

<body>
    <table cellpadding="0" cellspacing="0" width="800">

    </table>

    <script type="text/javascript" src="assets/js/app.min.js"></script>
    <script>
        window.addEventListener('load', () => {
            const inputOnchange = document.querySelectorAll('input[onchange]')
            const inputReadonly = document.querySelectorAll('input[readonly]')
    
            function fixReadOnly() {
                Array.from(inputReadonly).forEach(input => {
                    input.value = String(input.value).replace(',', '.')
                    input.value = Number(input.value).toFixed(2)
                })
            }
            function formatInput(e) {
                fixReadOnly()
                e.target.value = String(e.target.value).replace(',', '.')
            }
            Array.from(inputOnchange).forEach(input => {
                input.addEventListener('change', formatInput)
                input.value = String(input.value).replace(',', '.')
                fixReadOnly()
            })
        })
    
    </script>
</body>
</html>

[jeyjack]

La motivazione è abbastanza semplice, tu posizioni gli script nell'head mentre dovresti posizionarli prima della chiusura del tag body, ho provato anche applicando defer sullo script ma ovvimanete senza successo, questo perchè all'interno del tuo html utilizzi dei richiami a script tramite onchange, questi possono essere sovrascritti solo applicando le modifiche che ti ho detto.

Inoltre non capisco perchè richiami due volte gli stessi script nell'head :

window.addEventListener("DOMContentLoaded", e => {
  // Original JavaScript code by Chirp Internet: chirpinternet.eu
  // Please acknowledge use of this code by including this header.
....}

<script type="text/javascript" src="assets/js/app.min.js">
<script src="app.min.js">

In pratica hai copiato alla lettera il mio codice, ma dovevi prendere lo script della tua libreria app.min.js solo come esempio, visto che nel tuo html è già presente, in questo caso devi solo spostarli prima della chiusura del tag body per ottenere una cosa simile a:

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
</head>

<body>
    <table cellpadding="0" cellspacing="0" width="800">

    </table>

    <script type="text/javascript" src="assets/js/app.min.js"></script>
    <script>
        window.addEventListener('load', () => {
            const inputOnchange = document.querySelectorAll('input[onchange]')
            const inputReadonly = document.querySelectorAll('input[readonly]')
    
            function fixReadOnly() {
                Array.from(inputReadonly).forEach(input => {
                    input.value = String(input.value).replace(',', '.')
                    input.value = Number(input.value).toFixed(2)
                })
            }
            function formatInput(e) {
                fixReadOnly()
                e.target.value = String(e.target.value).replace(',', '.')
            }
            Array.from(inputOnchange).forEach(input => {
                input.addEventListener('change', formatInput)
                input.value = String(input.value).replace(',', '.')
                fixReadOnly()
            })
        })
    
    </script>
</body>
</html>

Grazie per il tuo supporto. Ho rimosso come da te giustamente consigliato, lo script dall'head e l'ho messo nel body, e cosi ti confermo che adesso lo script funziona perfettamente ed è visibile fin dal caricamento. Unica cosa che notavo, è che da quando ho applicato lo script del punto, sembra che i numeri siano maggiormente accorciati, per esempio se prima mi dava 0,0000 ora mi da ad es 0.0. Non so se è un'impressione o può essere il frutto dell'inserimento dei punti? Dici può influire sui decimali?

Per quanto riguarda il riportare due volte questo:

window.addEventListener("DOMContentLoaded", e =>{
  // Original JavaScript code by Chirp Internet: chirpinternet.eu
  // Please acknowledge use of this code by including this header.
....}

Si tratta dell'esecuzione di due script diversi, uno agisce sul tab espandibile, l'altro agisce sul libro che si espande al click mostrando le reference. So che alcune ripetizioni tipo "// Original JavaScript code by Chirp Internet: chirpinternet.eu" può essere rimossa, ma non essendo "skillato" con Javascript ho lasciato comunque lo script integro e preferito non alterarlo.

Nel caso di app.min.js si trattava di un errore nel riportarlo due volte, l'ho aggiornato adesso e ho rimosso la ripetizione.