Uncaught ReferenceError: myFunctionName is not defined at HTMLInputElement.onclick - javascript

I am using a form with 4 fieldsets. The second and third fieldsets are displayed based on a question I ask with a checkbox. I always display the second fieldset and hide the third. If you check the box, it should hide the second and show the third fieldset.
I am using a function in javascript. This is the code:
window.onload = function showVlees() {
if (document.getElementById('Vlees').checked) {
document.getElementById('Vleesgerecht').style.display = 'block';
} else {
document.getElementById('Vleesgerecht').style.display = 'none';
}
}
Every time when I click the checkbox I get this error:
Uncaught ReferenceError: showVlees is not defined
at HTMLInputElement.onclick
My checkbox is coded like this:
<td> <input type="checkbox" id="Vlees" name="Vlees" value="Vlees" onclick="showVlees()"> Klik hier als u een vleesgerecht wilt.</input>
Does anyone know what the problem is?

Named function expressions create a variable with a matching name only in their own scope, not the scope of the function they are defined in.
Use a function declaration and assign it to your load event handler in two steps.
function showVlees() {
// etc
}
window.onload = showVlees;

Related

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener'). What to do?

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

Am I missing a cast with querySelector('#element')?

I couldn't find identical answer to my question, so I decided to ask it by myself.
Im trying to select a HTML element with a specified ID in it.
This version works fine.
var button = document.getElementById('#submit');
function doSmth(){
console.log("clicked");
}
button.addEventListener('click', doSmth);
If I try to run the same code with querySelector:
var button = document.querySelector('#submit');
I get the following output:
Uncaught TypeError: button.addEventListener is not a function
Any ideas why same code outputs different return values?
This is the submit input field. It is part of the div container
<input id="#submit" type="submit">
Since the id have # use \\ to escape it
var button = document.querySelector('#\\#submit');
function doSmth() {
console.log("clicked");
}
button.addEventListener('click', doSmth);
<input id="#submit" type="submit">

Card not flipping due to uncaught reference error

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);

button to reset individual file input value with name "file[]" (array)

I'm trying to create a remove button to clear the value for a <input type="file">. The problem I have is that I don't know how can I make each button point to their respective <input>.
I'm using the JQuery plugin ezdz to upload and create previews of the images and I can easily add the buttons to each input with the $ezdz predefined var:
$ezdz.parent('div').find('div.arrow_box').html('<p>Quitar imagen</p>');
$ezdz.parent('div').find('div.arrow_box').removeClass('hide');
I need to create a function to reset the file input:
window.resetMethod =
function (e) {
$(this).parent('div').find('input').get(0).reset();
}
But the problem is in the button...
Quitar imagen
This is the html code:
<div class="first">
<!-- ezdz creates the following div and it'll be the container for the img -->
<div>Drop a file</div> <!-- This div is $ezdz -->
<input type="file" name="file[]" accept="image/jpeg" /><div class="arrow_box hide"></div>
</div>
Any idea to make this working?
EDIT: Sorry I didn't realized that function will reset the entire form. I need to reset the input above the button.
I'm getting the following error in console:
TypeError: $(...).parent(...).find(...).get(...) is undefined
this.form[...] in the onClickhandler will fail. I suppose that your console will display an error. At the moment of the call this corresponds to the anchor element (a), and that element has no form property.
So replace:
Quitar imagen
By:
Quitar imagen
The function resetMethod does not require you to pass the form object. As long as the element is placed in the intended form, you can pass it (as jQuery object) to the function, and it will find that form, and reset it.
There seems to be a problem too with the resetMethod function, because of the wrapping it does. I would suggest skipping that part, and just use an if, like this:
window.resetMethod = function (elem) {
var frm = elem.closest('form');
if (frm.length) {
frm.get(0).reset();
}
return false; // cancel default
}
Because of the return false, you can simplify the onclick part to:
Quitar imagen
You also do not need to use the window prefix.
Note that the function will also reset any other inputs you might have in the same form.
If you just want to reset the file-upload input, then use this variant of the function:
window.resetMethod = function (elem) {
frm = elem.closest('form');
console.log(frm);
if (frm.length) {
upload = frm.find('input[type=file]');
console.log(upload);
if (upload.length) {
// clear file-upload by
// re-injecting the html for it in the dom:
upload.replaceWith($("<p>").append(upload.clone()).html());
}
}
return false; // cancel default
}

Uncaught ReferenceError: errorCheck is not defined

I am trying to display an alert whenever the value inside of an input area is empty. I have done this in JavaScript and I keep getting the error:
"Uncaught ReferenceError: errorCheck is not defined"
It also says that my onclick is undefined. What is supposed to happen is when the user clicks the submit button is it supposed to look at the lastName input area and check if it is empty and if it is it will display an alert to the user.
HTML:
<input TYPE="button" VALUE="Submit" onClick="errorCheck()" />
JavaScript:
function errorCheck() {
if ((document.getElementsByID('lastName').value == "") {
alert("the last name area is empty")
}
}
I see two problems:
You have an extra ( in the if statement.
getElementsByID should be getElementById
This code works for me
function errorCheck() {
if (document.getElementById('lastName').value == "") {
alert("the last name area is empty")
}
}
The above code can be put in <script> tag inside <head> or <body> tag. If you want to put the code in an external .js file, you need to add a reference to the .js file.
Demo: http://jsfiddle.net/r7w1umnt/

Categories

Resources