In my code i have a simple drop down, on select of which i am calling a function called testCall() , But for some reason i am seeing a reference error :- cant find variable: testCall , Can any one please help
code below
function testCall(){
//print statements
//kony.print("test");
}
screen shots
if there is any error in your function of the entire js file, such errors appear, in my case i had a single equals in a if condition which was the issue.
it seems like your .js (module) contains some java-script error (most probably syntax error). Better you can copy all the java-script code and put it in chrome console it will show you the syntax error.
Related
I am using Laravels Mix feature with javascript and I am having a bit of trouble. I've made a new javascript file and included it in app.js, I've then done a function in this file. I want to call it from an onClick event however its giving me an error.
In cart.js I have an array that is adding all the products, and I also have this line of coded added.
<a onClick="removeProduct(${product["id"]})" class="btn-remove1">Remove</a>
Also in cart.js I have this function, that needs to be called on the onClick event.
function removeProduct(id) {
console.log(id);
}
However, It then gives me this error when trying to call removeProduct()
Uncaught ReferenceError: removeProduct is not defined at HTMLAnchorElement.onclick
So I'm not sure how to handle this, I guess I could use jQuery and wait for the object to be clicked and then get the id but just wondering if I can do it by onClick. Thanks for any help!
Edit:
Looking into this some more, Webpack is including Cart.js and in app.jss the function removeProduct() is there. Do I need to somehow call it like Cart.removeProduct() or something? (I've never used web pack/mix before)
I've found out with webpack you need to define it in the global scope. You can simply do that by adding this line of code.
window.removeProduct = removeProduct;
Clear your cache and then check or check that js file is included into your file or not.
I have a onChange handler bug on my production env.
I have a selectbox as follow:
<select name="select-history-one" id="select_old_version" class="form-control" onchange="showHistoryDiff();"> ... </select>
Below (inside the body tag) I have the function declared in a script tag as follow:
<script>
function showHistoryDiff(){
...
}
</script>
On my local machine in debug mode everything works just fine. As soon as I deploy it onto my webserver and try to select something I get that error message:
Uncaught ReferenceError: showHistoryDiff is not defined
at HTMLSelectElement.onchange (27:632)
onchange # 27:632
I really have no clue why that happens.
<body>
<select onchange="doChange()">
<option>A</option>
<option>B</option>
</select>
<script>
function doChange() {
console.log('hi');
}
</script>
</body>
As you can see from this example, it should work as you described.
That likely means it isn't really an issue with the code, but more an issue with how it is loaded.
The first is to make sure that your function is actually there. How you've described it, you should be able to open up the console in Chrome and just type showHistoryDiff and it should output something like this:
ƒ showHistoryDiff() { console.log('hi'); }
If it doesn't say this, but instead says it is undefined, then for whatever reason your code isn't getting built. If that's the case, you'll want to take a very close look at your build pipeline and/or setup to make sure it's actually going where you think it should.
If it does exist, then there are a couple of possibilities:
- it is getting overridden by something else and becoming undefined. Look for any other references to the function name throughout your code
- there is some other JavaScript syntax error which is happening before your function is declared, so the function doesn't end up declared
One other remote possibility is if you are loading the code from two different domains, you might be running into cross-origin (CORS) issues.
Look at your console and see if there are any errors being spit out. Clearing those up should be your first goal.
I've got a problem with my web application. Firebug console gives me a "ReferenceError" that nearly every function is not found. I don't really know. I didn't even change stuff in some of the functions.
A snippet of my code:
<body>
...
<tr id="08">
<td>08:00</td>
<td id="mo08" onclick="go(this)"> </td>
....
</body>
Neither the onclick functions work nor the <body onload=function()> works.
I've tried to put the script into the header, but it ain't working, neither beneath the body.
function go(element) {
var ident = element.id;
windowOpener("SomePage.jsp?i="+ident);
checkDataBase();
}
There could be any error in your file of javascript before this function i.e.
if functions are written in following order like
function foo1() {} /* If it contains error then
functions below it will not be able to recognised by compiler */
function foo2() {}
function go() {}
so check for error before go() defination
I have solved my issue now. The Problem were my tries to connect to my mysql server and get some data from it. After i deleted it out, everything worked fine for me.
The Error occured in Line 1 Column 1, so i didn't have any clues, where to find my error.
I Thank you all for your Time and Effort.
I am having some issues with a class project. Every thing was working fine and dandy up until the current part we are on. Basically, we had to add prototypes and cases to move to each location. Now my code will not work, and the teacher is about as helpful as a pet rock. I have two parts to my code, the html (which has part of the code including items and such) and the .js file that includes the locations.
I have created a repository on Github so it is easily accessible to all who want to help. At this point it is too late to submit to my professor, but I am curious on what I did wrong.
https://github.com/EmeraldX/Project-Help/tree/master
The main and directions.js are the files that I am currently working with.
Thanks!
Update: Okay, so it's still not working, and when I use Chrome's console it just tells me that:
function updateDisplay( message ) {
var textArea = document.getElementById("introduction");
textArea.value = message + "\n\n" + textArea.value;
Cannot read property 'value' of null
I tried opening your html page and js using firefox, and used the firebug consol to see if anything was wrong.
It looks like you have an ) missing in your js:
SyntaxError: missing ) after argument list directions.js:7:145
And it was right:
locations[2] = new Location(2,"Lake","A large lake that is formed by a river flowing from the East.",
new Item(1,"Fish","An old rotting fish.");
is missing a ')'
After correcting it, it appear that you miss this ) line 7, 9, 13 and 14.
Then a new error pop up:
ReferenceError: Item is not defined directions.js:7:2
This can be corrected by calling your direction.js AFTER you js script in main.html.
Hope it can help
I'm having a weird issue with a function I'm trying to call from within a jTemplates template giving the error "XYZ.getFriendlyName is not a function". It seems like I must have overlooked something simple, but I've tried everything I can think of and the error persists. The code looks like this:
<input type="text" value="{#if $T.RowId !== null}{XYZ.getFriendlyName($T.RowId)}{#/if}"/>
I've tried removing everything in the function to rule out a syntax error, renaming the function and moving it into the global namespace, moving the function itself into the page the template is on, before the template code.. Even putting everything in a ternary operator, which so far I haven't gotten to work at all in jTemplates. I continue to get the same error. Does anyone know a way I can fix this problem?
Thanks!
Garann
Don't use apostrophes for function:
Define function first:
function getFriendlyName( param ){
}
Add function to param:
$('template-name').setParam('getFriendlyName', getFriendlyName);
Access function inside template by using $P like $P.getFriendlyName()
For ex. {$P.getFriendlyName($T.id)}
Define function first:
function getFriendlyName( param ){
}
Add function to param:
$('template-name').setParam('getFriendlyName', 'getFriendlyName');
Access function inside template by using $P like
$P.getFriendlyName()
In case anyone was curious, this was a timing and context issue. The jTemplate was getting processed before a JS file on the same page was fully read. Moving the function into the object that starts processing the top/first template fixed the problem.