How do I get the parent id in this function?How do JavaScript closures work?How do I check if an element is hidden in jQuery?How to change an element's class with JavaScript?How do I remove a property from a JavaScript object?How do you get a timestamp in JavaScript?var functionName = function() vs function functionName() How do I redirect to another webpage?How to check whether a checkbox is checked in jQuery?How to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?
Has the United States ever had a non-Christian President?
Do quaternary sulfur dications exist?
What is more safe for browsing the web: PC or smartphone?
Changing stroke width vertically but not horizontally in Inkscape
Problem with estimating a sequence with intuition
What are the requirements for a river delta to form?
Primes in a Diamond
Make me a minimum magic sum
Is it normal for gliders not to have attitude indicators?
Installing Debian 10, upgrade to stable later?
Debian 9 server no sshd in auth.log
The selling of the sheep
What do you call a painting painted on a wall?
How to replace space with '+' symbol in a triangular array?
How important are good looking people in a novel/story?
Where did Lovecraft write about Carcosa?
How do I, as a DM, handle a party that decides to set up an ambush in a dungeon?
Can a player choose to add detail and flavor to their character's spells and abilities?
What is the thing used to help pouring liquids called?
Explaining intravenous drug abuse to a small child
How is trade in services conducted under the WTO in the absence of the Doha conclusion?
Is there a reason why Turkey took the Balkan territories of the Ottoman Empire, instead of Greece or another of the Balkan states?
As a GM, is it bad form to ask for a moment to think when improvising?
What is the meaning of 「隣のおじいさんは言いました」
How do I get the parent id in this function?
How do JavaScript closures work?How do I check if an element is hidden in jQuery?How to change an element's class with JavaScript?How do I remove a property from a JavaScript object?How do you get a timestamp in JavaScript?var functionName = function() vs function functionName() How do I redirect to another webpage?How to check whether a checkbox is checked in jQuery?How to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
The attached code properly returns the id and the value of the checked box.
I need to get the id of the enclosing div so that I can set the display attribute to hidden.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrapper">
<form>
<div id="boatdiv1"><input type="checkbox" name="cb" id="boat1" value="123" onclick='doClick();'><label for='boat1'>boat1</label><br></div>
<div id="boatdiv2"><input type="checkbox" name="cb" id="boat2" value="456" onclick='doClick();' onclick='doClick();'><label for='boat2'>boat2</label><br></div>
<div id="boatdiv3"><input type="checkbox" name="cb" id="boat3" value="789" onclick='doClick();'><label for='boat3'>boat3</label><br></div>
</form>
</div>
</body>
<script>
function doClick()
var checkedValue = null;
var inputElements = document.getElementsByName('cb');
for(var i=0; inputElements[i]; ++i)
if(inputElements[i].checked)
checkedValue = inputElements[i].value;
checkedID = inputElements[i].id;
console.log('checked id = '+checkedID);
console.log('value = '+checkedValue);
break;
ParentID = checkedID.offsetParent;
console.log(ParentID.id);
</script>
</html>
I expected that ParentID would return the id. Instead, I get an error "TypeError: undefined is not an object (evaluating 'ParentID.id')"
javascript html dom
edited Mar 23 at 20:49
Jack Bashford
19.9k52050
asked Mar 23 at 4:47
Doug HemingwayDoug Hemingway
18116
add a comment |
The attached code properly returns the id and the value of the checked box.
I need to get the id of the enclosing div so that I can set the display attribute to hidden.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrapper">
<form>
<div id="boatdiv1"><input type="checkbox" name="cb" id="boat1" value="123" onclick='doClick();'><label for='boat1'>boat1</label><br></div>
<div id="boatdiv2"><input type="checkbox" name="cb" id="boat2" value="456" onclick='doClick();' onclick='doClick();'><label for='boat2'>boat2</label><br></div>
<div id="boatdiv3"><input type="checkbox" name="cb" id="boat3" value="789" onclick='doClick();'><label for='boat3'>boat3</label><br></div>
</form>
</div>
</body>
<script>
function doClick()
var checkedValue = null;
var inputElements = document.getElementsByName('cb');
for(var i=0; inputElements[i]; ++i)
if(inputElements[i].checked)
checkedValue = inputElements[i].value;
checkedID = inputElements[i].id;
console.log('checked id = '+checkedID);
console.log('value = '+checkedValue);
break;
ParentID = checkedID.offsetParent;
console.log(ParentID.id);
</script>
</html>
I expected that ParentID would return the id. Instead, I get an error "TypeError: undefined is not an object (evaluating 'ParentID.id')"
javascript html dom
edited Mar 23 at 20:49
Jack Bashford
19.9k52050
asked Mar 23 at 4:47
Doug HemingwayDoug Hemingway
18116
Put id in form tag and check
– gowtham rajan
Mar 23 at 4:50
add a comment |
The attached code properly returns the id and the value of the checked box.
I need to get the id of the enclosing div so that I can set the display attribute to hidden.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrapper">
<form>
<div id="boatdiv1"><input type="checkbox" name="cb" id="boat1" value="123" onclick='doClick();'><label for='boat1'>boat1</label><br></div>
<div id="boatdiv2"><input type="checkbox" name="cb" id="boat2" value="456" onclick='doClick();' onclick='doClick();'><label for='boat2'>boat2</label><br></div>
<div id="boatdiv3"><input type="checkbox" name="cb" id="boat3" value="789" onclick='doClick();'><label for='boat3'>boat3</label><br></div>
</form>
</div>
</body>
<script>
function doClick()
var checkedValue = null;
var inputElements = document.getElementsByName('cb');
for(var i=0; inputElements[i]; ++i)
if(inputElements[i].checked)
checkedValue = inputElements[i].value;
checkedID = inputElements[i].id;
console.log('checked id = '+checkedID);
console.log('value = '+checkedValue);
break;
ParentID = checkedID.offsetParent;
console.log(ParentID.id);
</script>
</html>
I expected that ParentID would return the id. Instead, I get an error "TypeError: undefined is not an object (evaluating 'ParentID.id')"
javascript html dom
edited Mar 23 at 20:49
Jack Bashford
19.9k52050
asked Mar 23 at 4:47
Doug HemingwayDoug Hemingway
18116
The attached code properly returns the id and the value of the checked box.
I need to get the id of the enclosing div so that I can set the display attribute to hidden.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrapper">
<form>
<div id="boatdiv1"><input type="checkbox" name="cb" id="boat1" value="123" onclick='doClick();'><label for='boat1'>boat1</label><br></div>
<div id="boatdiv2"><input type="checkbox" name="cb" id="boat2" value="456" onclick='doClick();' onclick='doClick();'><label for='boat2'>boat2</label><br></div>
<div id="boatdiv3"><input type="checkbox" name="cb" id="boat3" value="789" onclick='doClick();'><label for='boat3'>boat3</label><br></div>
</form>
</div>
</body>
<script>
function doClick()
var checkedValue = null;
var inputElements = document.getElementsByName('cb');
for(var i=0; inputElements[i]; ++i)
if(inputElements[i].checked)
checkedValue = inputElements[i].value;
checkedID = inputElements[i].id;
console.log('checked id = '+checkedID);
console.log('value = '+checkedValue);
break;
ParentID = checkedID.offsetParent;
console.log(ParentID.id);
</script>
</html>
I expected that ParentID would return the id. Instead, I get an error "TypeError: undefined is not an object (evaluating 'ParentID.id')"
javascript html dom
javascript html dom
edited Mar 23 at 20:49
Jack Bashford
19.9k52050
asked Mar 23 at 4:47
Doug HemingwayDoug Hemingway
18116
edited Mar 23 at 20:49
Jack Bashford
19.9k52050
asked Mar 23 at 4:47
Doug HemingwayDoug Hemingway
18116
edited Mar 23 at 20:49
Jack Bashford
19.9k52050
edited Mar 23 at 20:49
Jack Bashford
19.9k52050
edited Mar 23 at 20:49
Jack Bashford
19.9k52050
19.9k52050
asked Mar 23 at 4:47
Doug HemingwayDoug Hemingway
18116
asked Mar 23 at 4:47
Doug HemingwayDoug Hemingway
18116
asked Mar 23 at 4:47
Doug HemingwayDoug Hemingway
18116
18116
Put id in form tag and check
– gowtham rajan
Mar 23 at 4:50
add a comment |
Put id in form tag and check
– gowtham rajan
Mar 23 at 4:50
Put id in form tag and check
– gowtham rajan
Mar 23 at 4:50
Put id in form tag and check
– gowtham rajan
Mar 23 at 4:50
add a comment |
2 Answers
2
active
oldest
votes
Use parentNode - also note that checkedID is a string, so it doesn't have a parent. Use getElementById to get the checked input:
ParentID = document.getElementById(checkedID).parentNode;
console.log(ParentID.id);
answered Mar 23 at 4:56
Jack BashfordJack Bashford
19.9k52050
add a comment |
You need to remove the onevent attributes and use either an onevent property or event listener instead:
<inputdoClick()...>
This is basically what you need to hide the parent element of clicked element (event.target):
event.target.parentElement.style.display = 'none';
Demo
Details commented in demo
// Reference the form
var form = document.forms[0];
// Register the form to the change event
form.onchange = hide;
/*
Called when a user unchecks/checks a checkbox
event.target is always the currently clicked/changed tag
Get the changed parent and set it at display: none
*/
function hide(e)
var changed = e.target;
changed.parentElement.style.display = 'none';
console.log(`Checkbox: $changed.id: $changed.value`);
console.log(`Parent: $changed.parentElement.id`);
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="wrapper">
<form>
<div id="boatdiv1"><input type="checkbox" name="cb" id="boat1" value="123"><label for='boat1'>boat1</label><br></div>
<div id="boatdiv2"><input type="checkbox" name="cb" id="boat2" value="456"><label for='boat2'>boat2</label><br></div>
<div id="boatdiv3"><input type="checkbox" name="cb" id="boat3" value="789"><label for='boat3'>boat3</label><br></div>
</form>
</div>
</body>
</html>answered Mar 23 at 5:07
zer00nezer00ne
26.3k32547
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55310689%2fhow-do-i-get-the-parent-id-in-this-function%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Use parentNode - also note that checkedID is a string, so it doesn't have a parent. Use getElementById to get the checked input:
ParentID = document.getElementById(checkedID).parentNode;
console.log(ParentID.id);
answered Mar 23 at 4:56
Jack BashfordJack Bashford
19.9k52050
add a comment |
Use parentNode - also note that checkedID is a string, so it doesn't have a parent. Use getElementById to get the checked input:
ParentID = document.getElementById(checkedID).parentNode;
console.log(ParentID.id);
answered Mar 23 at 4:56
Jack BashfordJack Bashford
19.9k52050
add a comment |
Use parentNode - also note that checkedID is a string, so it doesn't have a parent. Use getElementById to get the checked input:
ParentID = document.getElementById(checkedID).parentNode;
console.log(ParentID.id);
answered Mar 23 at 4:56
Jack BashfordJack Bashford
19.9k52050
Use parentNode - also note that checkedID is a string, so it doesn't have a parent. Use getElementById to get the checked input:
ParentID = document.getElementById(checkedID).parentNode;
console.log(ParentID.id);
answered Mar 23 at 4:56
Jack BashfordJack Bashford
19.9k52050
answered Mar 23 at 4:56
Jack BashfordJack Bashford
19.9k52050
answered Mar 23 at 4:56
Jack BashfordJack Bashford
19.9k52050
answered Mar 23 at 4:56
Jack BashfordJack Bashford
19.9k52050
19.9k52050
add a comment |
add a comment |
You need to remove the onevent attributes and use either an onevent property or event listener instead:
<inputdoClick()...>
This is basically what you need to hide the parent element of clicked element (event.target):
event.target.parentElement.style.display = 'none';
Demo
Details commented in demo
// Reference the form
var form = document.forms[0];
// Register the form to the change event
form.onchange = hide;
/*
Called when a user unchecks/checks a checkbox
event.target is always the currently clicked/changed tag
Get the changed parent and set it at display: none
*/
function hide(e)
var changed = e.target;
changed.parentElement.style.display = 'none';
console.log(`Checkbox: $changed.id: $changed.value`);
console.log(`Parent: $changed.parentElement.id`);
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="wrapper">
<form>
<div id="boatdiv1"><input type="checkbox" name="cb" id="boat1" value="123"><label for='boat1'>boat1</label><br></div>
<div id="boatdiv2"><input type="checkbox" name="cb" id="boat2" value="456"><label for='boat2'>boat2</label><br></div>
<div id="boatdiv3"><input type="checkbox" name="cb" id="boat3" value="789"><label for='boat3'>boat3</label><br></div>
</form>
</div>
</body>
</html>answered Mar 23 at 5:07
zer00nezer00ne
26.3k32547
add a comment |
You need to remove the onevent attributes and use either an onevent property or event listener instead:
<inputdoClick()...>
This is basically what you need to hide the parent element of clicked element (event.target):
event.target.parentElement.style.display = 'none';
Demo
Details commented in demo
// Reference the form
var form = document.forms[0];
// Register the form to the change event
form.onchange = hide;
/*
Called when a user unchecks/checks a checkbox
event.target is always the currently clicked/changed tag
Get the changed parent and set it at display: none
*/
function hide(e)
var changed = e.target;
changed.parentElement.style.display = 'none';
console.log(`Checkbox: $changed.id: $changed.value`);
console.log(`Parent: $changed.parentElement.id`);
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="wrapper">
<form>
<div id="boatdiv1"><input type="checkbox" name="cb" id="boat1" value="123"><label for='boat1'>boat1</label><br></div>
<div id="boatdiv2"><input type="checkbox" name="cb" id="boat2" value="456"><label for='boat2'>boat2</label><br></div>
<div id="boatdiv3"><input type="checkbox" name="cb" id="boat3" value="789"><label for='boat3'>boat3</label><br></div>
</form>
</div>
</body>
</html>answered Mar 23 at 5:07
zer00nezer00ne
26.3k32547
add a comment |
You need to remove the onevent attributes and use either an onevent property or event listener instead:
<inputdoClick()...>
This is basically what you need to hide the parent element of clicked element (event.target):
event.target.parentElement.style.display = 'none';
Demo
Details commented in demo
// Reference the form
var form = document.forms[0];
// Register the form to the change event
form.onchange = hide;
/*
Called when a user unchecks/checks a checkbox
event.target is always the currently clicked/changed tag
Get the changed parent and set it at display: none
*/
function hide(e)
var changed = e.target;
changed.parentElement.style.display = 'none';
console.log(`Checkbox: $changed.id: $changed.value`);
console.log(`Parent: $changed.parentElement.id`);
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="wrapper">
<form>
<div id="boatdiv1"><input type="checkbox" name="cb" id="boat1" value="123"><label for='boat1'>boat1</label><br></div>
<div id="boatdiv2"><input type="checkbox" name="cb" id="boat2" value="456"><label for='boat2'>boat2</label><br></div>
<div id="boatdiv3"><input type="checkbox" name="cb" id="boat3" value="789"><label for='boat3'>boat3</label><br></div>
</form>
</div>
</body>
</html>answered Mar 23 at 5:07
zer00nezer00ne
26.3k32547
You need to remove the onevent attributes and use either an onevent property or event listener instead:
<inputdoClick()...>
This is basically what you need to hide the parent element of clicked element (event.target):
event.target.parentElement.style.display = 'none';
Demo
Details commented in demo
// Reference the form
var form = document.forms[0];
// Register the form to the change event
form.onchange = hide;
/*
Called when a user unchecks/checks a checkbox
event.target is always the currently clicked/changed tag
Get the changed parent and set it at display: none
*/
function hide(e)
var changed = e.target;
changed.parentElement.style.display = 'none';
console.log(`Checkbox: $changed.id: $changed.value`);
console.log(`Parent: $changed.parentElement.id`);
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="wrapper">
<form>
<div id="boatdiv1"><input type="checkbox" name="cb" id="boat1" value="123"><label for='boat1'>boat1</label><br></div>
<div id="boatdiv2"><input type="checkbox" name="cb" id="boat2" value="456"><label for='boat2'>boat2</label><br></div>
<div id="boatdiv3"><input type="checkbox" name="cb" id="boat3" value="789"><label for='boat3'>boat3</label><br></div>
</form>
</div>
</body>
</html>// Reference the form
var form = document.forms[0];
// Register the form to the change event
form.onchange = hide;
/*
Called when a user unchecks/checks a checkbox
event.target is always the currently clicked/changed tag
Get the changed parent and set it at display: none
*/
function hide(e)
var changed = e.target;
changed.parentElement.style.display = 'none';
console.log(`Checkbox: $changed.id: $changed.value`);
console.log(`Parent: $changed.parentElement.id`);
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="wrapper">
<form>
<div id="boatdiv1"><input type="checkbox" name="cb" id="boat1" value="123"><label for='boat1'>boat1</label><br></div>
<div id="boatdiv2"><input type="checkbox" name="cb" id="boat2" value="456"><label for='boat2'>boat2</label><br></div>
<div id="boatdiv3"><input type="checkbox" name="cb" id="boat3" value="789"><label for='boat3'>boat3</label><br></div>
</form>
</div>
</body>
</html>// Reference the form
var form = document.forms[0];
// Register the form to the change event
form.onchange = hide;
/*
Called when a user unchecks/checks a checkbox
event.target is always the currently clicked/changed tag
Get the changed parent and set it at display: none
*/
function hide(e)
var changed = e.target;
changed.parentElement.style.display = 'none';
console.log(`Checkbox: $changed.id: $changed.value`);
console.log(`Parent: $changed.parentElement.id`);
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="wrapper">
<form>
<div id="boatdiv1"><input type="checkbox" name="cb" id="boat1" value="123"><label for='boat1'>boat1</label><br></div>
<div id="boatdiv2"><input type="checkbox" name="cb" id="boat2" value="456"><label for='boat2'>boat2</label><br></div>
<div id="boatdiv3"><input type="checkbox" name="cb" id="boat3" value="789"><label for='boat3'>boat3</label><br></div>
</form>
</div>
</body>
</html>answered Mar 23 at 5:07
zer00nezer00ne
26.3k32547
answered Mar 23 at 5:07
zer00nezer00ne
26.3k32547
answered Mar 23 at 5:07
zer00nezer00ne
26.3k32547
answered Mar 23 at 5:07
zer00nezer00ne
26.3k32547
26.3k32547
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55310689%2fhow-do-i-get-the-parent-id-in-this-function%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Put id in form tag and check
– gowtham rajan
Mar 23 at 4:50