Pass different Span and Input element to a Javascript Function

Question

i'm writting an html page to read and write data parameters from a PLC. My code is mainly composed by a lot of input tag to insert value and a lot of span tag to get value from PLC:

<span style="margin-left:8em;"><b>Set Attuale: </b><input id="iOra1ON3" style="width:15%;text-align:right;border:none"></input></span>

...

<span id="Ora1On3Span" class="isamod_dint" style="display:none">ORA1ON[3] A 0</span>

Inside the tag, i want to use a jscript function to get the value from the input and pass it to the span(internally connected to PLC).

<script type="text/javascript">
    $(document).ready(function() {
        $('#iOra1ON3').timepicker({
            showMinutes:false,                                  
            onSelect:                       
                function (){
                    var oSpanOra = document.getElementById("Ora1On3Span");
                    var oInputOra = oSpanOra.getElementsByTagName("input");
                    oInputOra[0].value = parseInt($("#iOra1ON3")[0].value);
                    var oButtonOra1 = oSpanOra.getElementsByTagName("button");
                    oButtonOra1[0].click();                                             
                }                                       
        });
    });
</script>

i've tried to write a function SetTime to do the same thing without repeat the code.

function SetTime(OraSpan,Input)
{       
    var oSpanOra = document.getElementById("OraSpan");
    var oInputOra = oSpanOra.getElementsByTagName("input");
    oInputOra[0].value = parseInt(document.getElementById("Input").value);
    var oButtonOra1 = oSpanOra.getElementsByTagName("button");
    oButtonOra1[0].click();                     
}

and call it inside the input tag in html:

<span style="margin-left:8em;"><b>Set Attuale: </b><input id="iOra1ON3" style="width:15%;text-align:right;border:none"></input></span>
<script type="text/javascript">
$(document).ready(function() {
    $('#iOra1ON3').timepicker({
        showMinutes:false,                                  
        onSelect:                       
            function        SetTime(Ora1On3Span,Ora1On3Span){}                                      
    });
});
</script>

but it doesn't work because i can't pass the id of my input and span tag to the function itself. this.id doesn't work, because i call the function inside the input tag, but outside the span tag. What i should do to pass the id to the function and get a clean code? Thanks in advance for any kind of suggestion UPDATE 1:) i've just modified the html and the js code using 'variable' in the function call

$('#iOra1ON3').timepicker({
                                            showMinutes:false,                                  
                                            onSelect:   function () {
                                                                        SetTime('Ora1On3Span','iOra1ON3')
                                                                    }                                           
                                            });

and add this mod in the function itself

function SetTime(OraSpan,Input)             
                {       
                        var oSpanOra = document.getElementById(OraSpan);
                        var oInputOra = oSpanOra.getElementsByTagName("input");
                        oInputOra[0].value = parseInt(document.getElementById(Input).value);
                        var oButtonOra1 = oSpanOra.getElementsByTagName("button");
                        oButtonOra1[0].click();                     
                }.

with only 1 parameter it works! but when i try to add another parameter and a second function call, everything doesn't work anymore. So i made a mistake, but i can't figured it out where i did it.

Which timePicker are you using? Does the onSelect event not return any any parameters? e.g. onSelect:function(event)? — TResponse
– TResponse, Commented Jan 19, 2015 at 8:46
i use this timepicker: fgelinas.com/code/timepicker .it's simple and functional for my project — Ashkrimn
– Ashkrimn, Commented Jan 19, 2015 at 8:48

Gwenc37 · Accepted Answer · 2015-01-19 09:34:15Z

1

Your function setTimedoesn't need inputs :

function SetTime(){       
    var oSpanOra = document.getElementById("OraSpan");
    var oInputOra = oSpanOra.getElementsByTagName("input");
    oInputOra[0].value = parseInt(document.getElementById("Input").value);
    var oButtonOra1 = oSpanOra.getElementsByTagName("button");
    oButtonOra1[0].click();                     
}

So your code should be (in the timepicker)

onSelect: function(){SetTime();}

OR

onSelect: SetTime

edited Jan 19, 2015 at 9:34

answered Jan 19, 2015 at 9:07

Gwenc37

2,0467 gold badges19 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ashkrimn Over a year ago

Inside the function SetTime i cannot get the value of the "OraSpan". So i get TypeError: oSpanOra is null inside the console

Gwenc37 Over a year ago

documentshould be a global var, so it shouldn't generate errors

Collectives™ on Stack Overflow

Pass different Span and Input element to a Javascript Function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related