Javascript passing variable to inline function in input element

Question

I am trying to pass an object, totalArray into an input element, id=fullReport so that I will be able to use the variable totalArray within a function: printFullReport.

The input element is concatenated in a string so that it can be eventually created into a table.

I am unable to pass totalArrays into onclick="printFullReport('+ totalArray+ ')"> possibly due the string concatenation, in my console I recieve: "Uncaught SyntaxError: Unexpected identifier" which implies a missing ; or ' but it appears to fine to me.

So this is my initial attempt:

<script type="text/javascript">
console.log(totalArray); //{"1":0,"2":0,"3":54700.33,"4":54700.33,"5":0,"6":0,"7":-54700.33,"8":0,"9":0,"10":0};
var str = "";
str += '<td>
<input id ="fullReport"  
class="button" 
type="button" 
value="Full Report" 
    onclick="printFullReport('+ totalArray+ ')">
    TOTAL (GBP):</td>';
</script>

this is my second attempt after reading and following the top answer: Inline onclick JavaScript variable

<script type="text/javascript">
var str = "";
console.log(totalArray) //{"1":0,"2":0,"3":54700.33,"4":54700.33,"5":0,"6":0,"7":-54700.33,"8":0,"9":0,"10":0};

function init(){
    document.getElementById('fullReport').onclick=function(){
        printFullReport(totalArray);
    };
}
window.onload=init;

str += '<td><input id ="fullReport"  class="button" type="button" value="Full Report" onclick="init();">TOTAL (GBP):</td>';
</script>

but now this is returning: Uncaught ReferenceError: init is not defined.

I am possibly not understanding scope when having html elements in javascript strings.

For a method to be invoked from inline event handlers, they need to be globally scoped. And think about it - If a variable is globally scoped already, do you really have to pass that variable to the `printFullReport` function. — gurvinder372, Jan 10 '18 at 09:12
I tried referencing totalArray within printFullReport() function with no arguments but this gave me the error: unresolved variable or type totalArray — hello world, Jan 10 '18 at 09:19
I guess it could be because `totalArray` may not be globally scoped. — gurvinder372, Jan 10 '18 at 09:21
totalArray is not globally scoped, it is in another function. — hello world, Jan 10 '18 at 09:23
In that case, you need to assign onclick from the same function where totalArray is scoped. — gurvinder372, Jan 10 '18 at 09:25
Wouldn't that be the same way that I have been approaching it? what would be a better approach? — hello world, Jan 10 '18 at 09:28
Your second approach is better than first one (I would recommend addEventListener always)... Just that you need to invoke assign the onclick from where `totalArray` is accessible. — gurvinder372, Jan 10 '18 at 09:30
Have a look here https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener — gurvinder372, Jan 10 '18 at 09:42

gurvinder372 · Accepted Answer · 2018-01-10T09:32:59.717

1

For second attempt, you are missing the closing double-quote "

<script type="text/javascript">

And you need to assign the onclick from where the totalArray is accessible. (now that you clarified in comments that totalArray is not globally scoped.)

Demo

<script type="text/javascript">
var str = "";
totalArray ={ "1":0,"2":0,"3":54700.33,"4":54700.33,"5":0,"6":0,"7":-54700.33,"8":0,"9":0,"10":0};

//console.log(totalArray) //{"1":0,"2":0,"3":54700.33,"4":54700.33,"5":0,"6":0,"7":-54700.33,"8":0,"9":0,"10":0};

function init(){
    document.getElementById('fullReport').onclick=function(){
        printFullReport(totalArray);
    };
}
window.onload=init;

str += '<td><input id ="fullReport"  class="button" type="button" value="Full Report" onclick="init();">TOTAL (GBP):</td>';
</script>

<input id ="fullReport"  class="button" type="button" value="Full Report" onclick="init();">TOTAL (GBP):

edited Jan 10 '18 at 09:32

answered Jan 10 '18 at 09:18

gurvinder372

66,980
10
72
94

could you specify where the closing double quote was? – hello world Jan 10 '18 at 09:25
Before `>` of the script tag – gurvinder372 Jan 10 '18 at 09:25
This was not the problem. I have edited it. this was a typo when copying it over. – hello world Jan 10 '18 at 09:29
1

@helloworld Check the demo (snippet) as well – gurvinder372 Jan 10 '18 at 09:29

Javascript passing variable to inline function in input element

1 Answers1