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/
Related
An error message appeared after adding my button which calls a function in JavaScript. I cannot find the problem.
Sorry for the faults. I am French and I'm using Google Translate.
Here is the part of the code in question:
document.getElementById("jouer").onclick = start();
document.getElementById("jouer").onclick = function () { alert('defis[0]'); };
<input id= "jouer " type="button" value="jouer" click="start()"/>;
And the error message is:
Uncaught SyntaxError: Unexpected token '<'
It seems like you are trying to run both JS and HTML in one file.
To get it to work, you need to create a separate file with HTML stuff and use
<script src="your-js-file.js"></script> in the HTML file for the browser to be able to run JS.
function start() {
alert('i am working')
};
document.getElementById('jouer2').onclick = start
<input id= "jouer " type="button" value="jouer" onclick="start()"/>;
<input id= "jouer2" type="button" value="jouer2"/>;
target.onclick = functionRef;
functionRef is a function name or a function expression. so you can try this
document.getElementById("jouer").onclick = start;
also you don't need the click attribute in the element as you are targeting the DOM element above. if you want to trigger a function directly from some element then pass onclick attribute with the function call and you won't need to target like this
document.getElementById("jouer").onclick
reference: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick
The only error i see is that you have a whitspace in the id selector in the input "jouer". this causes the script to not be able to grab the element. Otherwise, the error Uncaught SyntaxError: Unexpected token '<' means that you are trying to include a file (script) that it can't find.
here is the function from inside a script
function dosubmit()
{
if (getObj("Frm_Username").value == "")
{
getObj("errmsg").innerHTML = "Username cannot be empty.";
getObj("myLayer").style.visibility = "visible" ;
return;
}
else
{
getObj("LoginId").disabled = true;
getObj("Frm_Logintoken").value = "3";
document.fLogin.submit();
}
}
i want to get the value of getObj("Frm_Logintoken")
as i can't pull the value from #Frm_Logintoken
using document.getElementById("#Frm_Logintoken")
this gives me null
because Frm_Logintoken only gets it's value when i click submit .
<input type="hidden" name="Frm_Logintoken" id="Frm_Logintoken" value="">
full page code
i found this online /getObj\("Frm_Logintoken"\).value = "(.*)";/g
but when i run it ... it gives me the same line again !
it's full code
https://hastebin.com/gurosatuna.xml
First:
Your checking if a value is empty with JS. However this is NOT needed as HTML does this for you. Add a attribute required and the form will not submit as long this value is empty
Documentation: https://www.w3schools.com/tags/att_input_required.asp
Second:
You could use the event handler 'on submit'. The code is not complete enough to know if u did this but I suppose you just added a Click handler on the button.
Documentation: https://www.w3schools.com/jsref/event_onsubmit.asp
When combining these two, you always have a username filled in and the code only executes when submitted. I hope this helps, if not please leave a comment and I will edit this answer.
EDIT: the answer on this SO will also help (not the checked on but the one below)
How can I listen to the form submit event in 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;
Ok, so this seems like it should be very straight forward, but I have been stuck on this for hours.
Objective: I want to store a variable on my page based on if I last clicked on the "Delivery" or "Pickup" div section of the page.
I have Jquery that uses the following code to switch what is shown on the page (first segment in section). Everything works except .value and .innerHTML:
$(document).ready(function(){
$("#pickup_click_link").click(function(){
$('#delivery_stuff').fadeOut('fast', function(){
$('#pickup_stuff').fadeIn('fast');
});
$('#delivery_stuff2').fadeOut('fast', function(){
$('#pickup_stuff2').fadeIn('fast');
});
$("#pickup_button").css("background-color","silver");
$("#delivery_button").css("background-color","white");
window.onload = function(){
document.getElementById('pu_del_nav_var').value='Pickup';
document.getElementById('pu_del_nav_varTEST').innerHTML='Pickup';
}
});
});
$(document).ready(function(){
$("#delivery_click_link").click(function(){
$('#pickup_stuff').fadeOut('fast', function(){
$('#delivery_stuff').fadeIn('fast');
});
$('#pickup_stuff2').fadeOut('fast', function(){
$('#delivery_stuff2').fadeIn('fast');
});
$("#pickup_button").css("background-color","white");
$("#delivery_button").css("background-color","silver");
delivery_click();
});
});
I tried to put the code that is giving me the error (.value ="Pickup/Delivery" and .innerHTML="Pickup/Delivery") onload, in a seperate function, after the Div and Input, but I always get the error Uncaught TypeEror: Cannot set property 'value' of null
function delivery_click() {
document.getElementById('#pu_del_nav_var').value='Delivery';
document.getElementById('#pu_del_nav_varTEST').innerHTML='Delivery';
alert("Delivery!");
}
How can I get this javascript to work so it changes this input and the information where "temp here" is?
<input type="hidden" id="pu_del_nav_var" name="pu_del_nav_var" value="Pickup">
<div name='pu_del_nav_varTEST' id='pu_del_nav_varTEST'>temp here</div>
$('#pu_del_nav_var').val('Delivery');
$('#pu_del_nav_varTEST').html('Delivery');
Besides, why would you want to mix jquery & javascript with selectors.
In my HTML file, I have a JavaScript function named "CheckCaptcha". I am using following code line to execute that function when an image is clicked. It is not working. After hours of tweaking and modifying the code, it is not simply reaching to the location where the JavaScript function lies.
I am using this code line:
<input type="image" src="images/join.gif" name="SubmitStudent" onclick="CheckCaptcha();" width="98" height="31"/>
The JavaScript section is as below:
<script type="text/javascript">
function CheckCaptcha()
{
aler("-");
var CaptchaWord;
CaptchaWord = document.getElementById(StudentCaptchaImage);
alert(CaptchaWord);
if (CaptchaWord.length <= 4)
{
alert("Please enter words as seen in the image.");
return false;
}
}
</Script>
Actually, I am a new user, and StackOverflow is avoiding me to post the entire HTML section.
Try this:
function CheckCaptcha()
{
alert("-");
var CaptchaWord = document.getElementById('StudentCaptchaImage');
alert(CaptchaWord);
if (CaptchaWord.value.length <= 4)
{
alert("Please enter words as seen in the image.");
return false;
}
}
the .value attribute contains the value, the DOM element does not have a length property.
the gEBI method takes a string, not an identifier as you had it.. unless it was a variable.
your example had a typo in the first alert, I'm guessing you recently added it and it was not the initial problem.
If you're not sure of anything you should start alerting as many things as possible..
alert( typeof CaptchaWord.length )
Make sure getElementById takes a string:
CaptchaWord = document.getElementById("StudentCaptchaImage");
Have checked for any errors in JavaScript which may not be related to this particular function? Use Firebug to find any errors
I tried following code and its working
<script>
function CheckCaptcha(){
alert("test");
}
</script>
<input type="image" src="images/join.gif" name="SubmitStudent" onclick="CheckCaptcha();" width="98" height="31"/>
Have you tried returning false to cancel the event bubble?
onclick="CheckCaptcha(); return false"