Uncaught ReferenceError: parentsCheck is not defined - javascript

I am very new to JS, but am trying to create a checkbox that when checked will reveal a div with an id of "second_row", and when unchecked will hide it (unchecked by default). Am I missing some code? Is my syntax incorrect? I could really use some help. Thanks for givin a newbie a hand!
Html:
<input type="checkbox" name="under_18" id="under_18" class="check" value="under_18" form="contest_form" onclick="parentsCheck()" />
JavaScript:
<script>
function parentsCheck()
{
var check1 = document.getElementById('under_18'),
if (check1.checked === true) {
document.getElementById('second_row').style.display = 'block';
}
else if (check1.checked === false) {
document.getElementById('second_row').style.display = 'none';
}
}
</script>
P.S. Dont know if it matters, but the checkbox is in a table cell.

Your , at the end of the var statement should be a ;.
It's causing a SyntaxError, causing the JavaScript block to be effectively ignored, so parentsCheck() is never defined.
var check1 = document.getElementById('under_18');
http://jsfiddle.net/tYv28/
As an aside, check1.checked will always return a boolean, so you don't need to do the === true and === false comparison; the following will work just fine:
function parentsCheck()
{
var check1 = document.getElementById('under_18');
if (check1.checked) {
document.getElementById('second_row').style.display = 'block';
} else {
document.getElementById('second_row').style.display = 'none';
}
}

When using event handler attributes, JavaScript only recognizes functions in the global scope. Try defining the event handler in your JavaScript, which also has the benefit of being unobtrusive:
var el = document.getElementById('under_18');
el.onclick = parentsCheck; // <---- This
jsFiddle
Also, you need to change the , into a ;.

Related

How to match anything between < & > in regex?

I'm trying to match anything that lies between < and >, and nothing seems to be working.
My current code is:
var regex = /\<(.*?)\>/
var targeting = $('#auto-expand').val //A text area
function validateText(field)
{
if (regex.test(field) == true)
{
alert(field.match(regex))
}
else
{
alert("fail")
}
}
It keeps returning fail, not sure why.
Any help would be so great! :)
It's not clear from your question how you are calling the validateText function. But it looks like are trying to set targeting outside the function, which means you are probably setting it before there's text in the box.
Below I change val to val() to call the function and looked up the value when the function runs rather than before. The regex itself works fine (keeping this in mind)
var regex = /<(.*?)>/
function validateText() {
var targeting = $('#auto-expand').val() //A text area
if (regex.test(targeting) == true) {
alert(targeting.match(regex))
} else {
alert("fail")
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="auto-expand"></textarea>
<button onclick=validateText()>Test</button>

How can I continue checking validation after first regex passes in javascript?

I have a regex in a javascript that is checked onclientclick. The code I have below works properly if the first check is false, I have a message displayed and it stops before submitting as I would like it to. However, if the first validation checks fine, I want it to check the next set of validations but it just skips the rest and submits. Am I missing something here?
<script type="text/javascript">
function checkall() {
var isValid21 = false;
var regex21 = /(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]/;
isValid21 = regex21.test(document.getElementById("TimeTest").value);
document.getElementById("spnError21").style.display = !isValid21 ? "block" : "none";
document.getElementById("TimeTest")
return isValid21;
var isValid2 = false;
var DDLOne = document.getElementById("DropDownA");
if (DDLOne.value == "") {
document.getElementById("spnError2").style.display = !isValid2 ? "block" : "none";
document.getElementById("DropDownA")
return false;
}
var submit = 0;
if (++submit > 1) {
alert('Give me a second.');
return false;
}
return true;
}
</script>
<asp:Button ID="Button1" runat="server" Text="Submit" onclientclick="return checkall();" OnClick="Button1_Click" />
Your code is returning immediately after the first check, which is why the second one is never checked. You'll need to change your code to return an aggregate of the two "checks" at the end of your function. Also, your submit variable is declared inside the scope function, which means it will always get initialized to 0. I think you need to declare that outside your function. In addition, what are those empty document.getElementById("...") calls for? They dont do anything. Finally, you are returning true at the very end of your function. You'll need to tweak your logic rules and return the aggregate of isValid21 and isValid2 at the end. You'll have to do the tweaking yourself, as we don't know the required business rules.With all that, I'm not sure that this logic is sound, but this should at least get you going in the right direction:
var submit = 0;
function checkall() {
var isValid21 = false;
var isValid2 = false;
var regex21 = /(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]/;
isValid21 = regex21.test(document.getElementById("TimeTest").value);
document.getElementById("spnError21").style.display = !isValid21 ? "block" : "none";
var DDLOne = document.getElementById("DropDownA");
if (DDLOne.value == "") {
document.getElementById("spnError2").style.display = !isValid2 ? "block" : "none";
isValid2 = false;
}
if (++submit > 1) {
alert('Give me a second.');
isValid2 = false;
}
//SOME OTHER LOGIC RULES THAT CHANGE isValid2 TO TRUE...
//YOU WILL NEED TO DO SOME ADDITIONAL LOGIC TWEAKING BEFORE THIS LINE. AS IT STANDS NOW, THIS WILL ALWAYS RETURN FALSE.
return isValid21 && isValid2;
}

If condition is true show button

I'm trying to make a button appear if condition "isauthenticated" is "true".
used this as a reference, but not sure what's wrong with my code.
<button id="authentic" type="hidden">test</button>
<script>
window.onload = function() {
var logedIn = ('{{isauthenticated}}')
if(logedIn == "true") {
document.getElementById('authentic').style.display = 'block';
} else {
document.getElementById('authentic').style.display = 'none';
}
}
</script>
Ok Guys, sorry for the bad question. This is what I was looking for
<script>
var isAuth = ('{{ user.isauthenticated}}');
if (isAuth) true;
document.getElementById("menuProfile").style.display="block";
document.getElementById("showProfile").style.display="none";
</script>
if logedIn is a boolean value you need to remove the "'s from the if(logedIn == "true") { line
or just check:
if(logedIn) {...
Please refer to Boolean Javascript documentatiion:
If the Boolean object has no initial value, or if the passed value is one of the following:
0,-0,null,"",false,undefined,NaN the object is set to false. For any other value it is set to true (even with the string "false")!
see what value does logedIn have before the if!

JavaScript 'function undefined' error working with jsfiddle

I'm trying just to understand an error completely because sometimes I can get around it and other times I can't. I've tried just writing a function:
function toggleButton() {
}
But I get the same error. This is the .js sample.
var checkBox = document.getElementById("chkMyBox");
checkBox.onclick = function toggleButton(e, obj1)
{
var btnElement = document.getElementById("btnMyButton");
if(btnElement != null) {
alert("Element not null");
if(e.target.checked && obj1 != null) {
alert("Checking check " + obj1.checked);
if(obj1.checked == true && btnElement.getAttribute('disabled') == false){
btnElement.getAttribute('disabled') = false;
} else {
btnElement.getAttribute('disabled') = true;
}
}
}
}
Here's the html:
<form id="frmCheckBox">
<input type="checkbox" id="chkMyBox" />
<button id="btnMyButton" disabled>I'm a Button</button>
</form>
http://jsfiddle.net/Arandolph0/h8Re6/3/
Change this line which uses name:
<input type="checkbox" name="chkMyBox" />
into using id instead:
<input type="checkbox" id="chkMyBox" />
Alternatively you could use:
var elements = document.getElementsByName('chkMyBox');
var element = elements[0]; //first element with that name in the array
or
var element = document.getElementsByName('chkMyBox')[0];
Update (as OP changed the code from the original question):
function toggleButton(e, obj1)
This won't work as there is only a single argument given to the callback function (e).
Use e.target to get the element.
You're trying to get an element by its name. You'd have to do:
var checkBox = document.getElementsByName('chkMyBox')[0];
Or, if you prefer by id. Just add id="chkMyBox" to your checkbox input.
You have several problems here.
1) You try to get the button by using getElementById but your element has no id. The easiest fix is to fix your markup.
<input type="checkbox" name="chkMyBox" id="chkMyBox" />
2) Your event handler takes two parameters. When attaching the handler via the DOM, only the event gets passed to your handler. Therefore obj1 will always be undefined. You need to get the checkbox element from the e parameter.
checkBox.onclick = function(e) {
var obj1 = e.target;
// rest of handler
}
3) You shouldn't use getAttribute to check for the element being disabled/enabled. It will give you the text value of the attribute which is an empty string. Instead, use the boolean property that the DOM gives you:
// toggle the disabled attribute
obj1.disabled = !obj1.disabled;

Why would a jQuery function be only selectively run?

I am trying to debug this (incomplete) script, but it is behaving inconsistently. The main problem is when I click off of an item, sometimes the $(editObj).removeAttr('style'); runs and sometimes not. Through the Chrome inspector I can see that the editObj variable in each case is properly defined, but it isn't always getting its inline style attribute removed. Sometimes, and sometimes not. Cannot determine the reason.
I'm a bit out of my element with this code. Maybe something about it is obvious; Regardless I'd appreciate some ideas on why this sort of unpredictable might be occuring!
var editObj = null;
var inputType = 'text';
var input = '#textEdit';
var formId = '#form_undefined'
$(function() {
$("#textEdit").click(function(event) {
event.stopPropagation();
});
$('body').click(function(event) {
if (editObj){
//textedit contents to editobj and
if (inputType == 'text'){
$(editObj).text($("#textEdit").val());
}
$("#textEdit").removeAttr('style').hide();
$(editObj).removeAttr('style');
var previewId = $(editObj).attr('id');
var formId = previewId.replace('bzm', 'form');
$("#" + formId).val($("#textEdit").val());
//ajax modify database
editObj = null;
}
});
$(".editable").not("video, img, textarea")
.click(function(event) {
event.stopPropagation();
loadEditor($(this));
});
});
function loadEditor(element){
$("#textEdit")
.copyCSS(element)
.offset($(element).offset())
.css("display", "block")
.val($(element).text())
.select();
$(element).css("color", "transparent");
editObj = element;
}
I've had trouble in the past with .removeAttr('style'); not actually removing all the inline styles.
Use
$(editObj).attr('style', '');
instead of
$(editObj).removeAttr('style');
I dint see any code that initializes e editobj variable.. May be Im missing Anthony.. Anyways what are the chances of the edit obj being null.. Just put a log statement in the click function to always log ur editobj and see if it is null smtimes

Categories