I have a card that displays one content on one side and different content when it's flipped. The flip is triggered with an onClick call on an a tag. However, I'm getting caught up on an uncaught reference error for flip. What steps should I take to debug this? I've double-checked the syntax for the html and JS (everything seems to be fine).
HTML
p.footer: #[a(href='#', onclick='flip()') About #[span]]
JS
$(document).ready(function () {
// FLIP IT
function flip () {
$('.card').toggleClass('about');
}
});
Error
Uncaught ReferenceError: flip is not defined
onclick # (index):1
flip() is local to $(document).ready , you can't access with onclick='flip()'.
it would be better to use jquery to assign the handler in ready().
$('p.footer a:contains(About)').click(flip);
Related
I'm designing a quiz app, but while console logging for a click event, this statement showed up on the console.
Code -
startButton.addEventListener("click", function startGame() {
console.log("started");
});
what should i do to show the statement on my console???
If you get this error it means that your start button is null. 2 possibilities:
Your selector for startButton is incorrect. So you have to adjust your selector.
Your selector is correct but your button is not in the DOM yet. So you have a problem with timing. Try to add the eventlistener at the end of your code
I wrote a function named search that I expected to be called when the link was clicked, as the code snippet below shows:
<script>
function search() {
console.log('Searching');
}
</script>
Click here
However, the code does not work as I expected, which causes this error (in Chrome) when the link is clicked:
Uncaught TypeError: search is not a function
I tried logging search to see why the error was thrown:
Click here
<script>
function search() {
console.log('Searching');
}
</script>
Click here
This time, the console logged an empty string each time the link is clicked. What puzzles me is that search is actually defined somewhere else as an empty string, making my function definition useless.
So I want to know what happens when a click event is triggered, and when is search here defined?
It turns out search actually is referring to to the a element's search property which is a property that controls search parameters, which happens to be an empty string in this case. This is because with an HTMLAnchorElement, it is special as it is used to create hyperlinks and navigate to other addresses, and thus the search property is used to control parameters of searches by hyperlinks (similar to that of the Location) object. Setting the search property of an anchor element will then in turn set the global Location instance's window.location.search. This creates a naming conflict and because an empty string is not a function the error is thrown.
Use a different name for the function to remove this conflict. Note that if you don't use an a, you'll see it work just fine:
<script>
function search() {
alert("foo");
}
</script>
<div onclick="search();">Click me!</div>
Li357's answer explains most of what's going on, but to add a point, the reason that
<a onclick="search();">Click me!</div>
results in search referring to the anchor's search property is that inline handlers have an implicit with(this) surrounding them. To the interpreter, the above looks a bit like:
<a onclick="
with(this) {
search();
}
">Click me!</div>
And search is a property of HTMLAnchorElement.prototype, so that property gets found first, before the interpreter gets to looking on window for the property name.
It's quite unintuitive. Best to avoid inline handlers, and to avoid using with as well. You could add the event listener properly using Javascript to solve the problem too:
function search() {
console.log('Searching');
}
document.querySelector('a').addEventListener('click', search);
Click here
Change the name of the function. Just tried your code and it worked once I changed the name of the function.
<body>
<script type="text/javascript">
function test() {
console.log('Searching');
}
</script>
Click here
I have an input inside an iframe that I would like to put in a preloaded value after the page has loaded. I've put in this code so far:
<script>
jQuery('iframe').load(function(){
jQuery('iframe').contents().find('input#ysi_subject').bind('change',function(e) {
var title_name = "DO I LOOK LIKE I'M WORKING?";
jQuery('input#ysi_subject').val(title_name);
});
});
</script>
but when I look at the console log, I get this error:
Uncaught TypeError: Cannot set property 'value' of null
Can anyone help explain why it's not catching the input?
This is because you are trying to access the DOM prior to the DOM elements actually being loaded, so any references to the DOM in this case will output null. Place the code in a $(document).ready() handler in order for this to work:
... <!-- jQuery reference -->
<script>
$(document).ready(function() {
// your code that you are trying to run
});
</script>
* Note that I simplified it down to show what I am really talking about.
The change event is firing from within the iframe back to the parent window.
$("input#si_subject") does not exist in the parent window.
jQuery('iframe').load(function(){
jQuery('iframe').contents().find('input#ysi_subject').bind('change',function(e) {
var title_name = "DO I LOOK LIKE I'M WORKING?";
// this would work
jQuery('iframe').contents().find('input#ysi_subject').val(title_name);
// this is better
$(this).val(title_name);
});
});
Either my javascript or my template is broken.
This is my javascript to change error messages. I cannot change my template, because it is not accessible.
$(function() {
$.ajaxSetup({complete: function() {
$("errorExplanation:contains('1')").html('1 error has occurred');;}}) });
This is the part of the website that refuses to be translated:
The code of the page
What am I doing wrong?
I'm a newbie trying to write a JS/HTML report generator based on criteria which I submit in an HTML form. The plan eventually is to use PHP/mySQL to manipulate a database and return results but for now I'm just trying to build the HTML/CSS/JS and I've got stuck. I have attributed a JS function to a button in the <body> like so:
<input type="button" id="reportButton" value="Generate Report" onclick="showCriteria()">
I included a script in the <head> as follows:
<script>var showCriteria = function(){ My JS code...}</script>.
This function simply does some date manipulation and displays the result in a div on the same page like so:
document.getElementById("endDate").innerHTML = "to "+endDay+" "+endMonthName+" "+endYear;
But I get Uncaught TypeError: Cannot set property 'innerHTML' of null. So I searched the forum and discovered that this can sometimes be caused by not waiting for the window to load. So I wrapped the script as follows:
<script>
window.onload = function()
var showCriteria = function(){ My JS code...}
That solved the initial error but I then get Uncaught ReferenceError: showCriteria is not defined
It seems like I'm in a Catch22. I get the first error because the script is running before the window has loaded. I fix that by waiting for the window to load only to find that the HTML is waiting for my script to define my JS function.
Any advice gratefully received.
Report Generator screenshot
Window.load script
You've almost got the solution. At least you've got all the right elements.
window.onload = function() {
document.getElementById('reportButton').addEventListener('click', showCriteria);
};
This will make it so the button does not function until the page is ready.
You also need to remove the onclick from the button.
When you put the showCriteria function inside window.onload, please make sure it is accessible by the DOM, i.e. window.showCriteria.
<script>
window.onload = function()
window.showCriteria = function(){ My JS code...}
...
Beside using onclick on html, you can use add listener to listen the click event on that element.
window.onload = function() {
document.getElementById('reportButton').addEventListener('click', showCriteria);
};