How to use JS Function in page code?

Summary:

How to user JS Function in page code

Content (please ensure you mask any confidential information):

Hi Experts,

I have a page where I want to use a JS Function but it keep on saying: "JavaScript validation error: 'getSvgClassName' is not defined."

Page Code:

<template slot="taskMappingTemplate" data-oj-as="task">             

<oj-gantt-task task-id="[[task.data.taskName]]" start="[[task.data.startDate]]" end="[[task.data.endDate]]" label="[[task.data.taskName]]"                svg-class-name="[[getSvgClassName(task.data.taskName)]]"></oj-gantt-task>

</template>

Page Javascript:

I have also tried this function in a separate JS file:

We have already a vbEnter Action Chain which we use to construct a variable to populate data.