I am using getElementById to toggle the display of a block in html. The block I am toggling is wrapped in a div like so:
<div id="SunMotion">
<br>
<p>
Toggle the switch to run "24HourCycle.py"
</p>
<label class="switch">
<input id="check3" type="hidden">
<article>
<button class="program" id="check3" id="script1" onclick="check3()" data-fileName="24HourCycle.py">24 Hour Cycle</button>
</article>
</label>
</div>
This is activated using the button:
<button class="button button1" onclick="SunMotion()">
Motion of the Sun
</button>
The button calls the function in javascript which displays the div using its Id:
document.getElementById("SunMotion").style.display = 'none';
function SunMotion() {
var x = document.getElementById("SunMotion");
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
document.getElementById("SunMotion").checked = false;
}
}
This works fine until I try to do the same thing with a different block. with a new function specific to that button:
<button class="button button1" onclick="SunMotion()">
Motion of the Sun
</button>
<button class="button button1" onclick="Hologram()">
Hologram Shapes
</button>
<br>
<div id="Hologram">
<br>
<p>
Toggle the switch to run the Hologram program
</p>
<label class="switch">
<div class="grid-container">
<input id="check12" type="hidden">
<div class="grid-container">
<div class="item1"><button id="check12" id="grd" id="script1" onclick="check12()" data-fileName="red.py">Red</button></div>
<input id="check13" type="hidden">
</label>
</div>
<br>
<div id="SunMotion">
<p>
Toggle the switch to run "24HourCycle.py"
</p>
<label class="switch">
<input id="check3" type="hidden">
<article>
<button class="program" id="check3" id="script1" onclick="check3()" data-fileName="24HourCycle.py">24 Hour Cycle</button>
</article>
</label>
</div>
<br>
<script>
document.getElementById("Hologram").style.display = 'none';
function Hologram() {
var x = document.getElementById("Hologram");
if (x.style.display === 'none') {
x.style.display = 'inline';
} else {
x.style.display = 'none';
document.getElementById("Hologram").checked = false;
}
}
document.getElementById("SunMotion").style.display = 'none';
function SunMotion() {
var x = document.getElementById("SunMotion");
if (x.style.display === 'none') {
x.style.display = 'inline';
} else {
x.style.display = 'none';
document.getElementById("SunMotion").checked = false;
}
}
</script>
if you want use that function on another div, you need to use getElementByClass instead. you can check it Here
or, if you still want to use id, just send that id as parameter.
function SunMotion(id) {
var x = document.getElementById(id);
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
document.getElementById(id).checked = false;
}
}
and, to call that just paste an Id to that function.
<button class="button button1" onclick="SunMotion('SunMotion')">
Motion of the Sun
</button>
Sorry, Typo. you can check my recheck my answer. my Edit is :
onclick="SunMotion('SunMotion')"
Please noted that I changing " by ' in parameter.
Related
How should I bind the Id i am getting in a variable #item.ArticleId to a JavaScript code which gets the id dynamically?
My use case is that I have to show the Comment TextBox at the click on the Add A Comment Button.
Following is the code on how I am getting the Article ID:
<span id="addComment" onclick="AddaComment()"><i class="fa fa-comment" aria-hidden="true" ></i> Add a Comment</span>
<div id="Comment(#item.ArticleId)" style="display:none;">
<input type="hidden" name="ArticleId" id="ArticleId" />
<input type="text" name="Comments" />
<input type="submit" class="btn add-comment" value="Add Comment">
</div>
Below is my code for JavaScript:
function AddaComment() {
var x = document.getElementById("Comment()");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
This is how I solved it:
function AddaComment(id) {
var x = document.getElementById("Comment_"+id);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
I am using javascript to check if a checkbox is ticked or not. There are 3 checkboxes and only one can be selected at a time. I am using the following code which works fine, when I uncheck a box and check another the div displays correctly but if I select one then select another e.g have selected checkbox1 and select checkbox2 the "testing" div still appears and the "video" div does not appear. I am guessing this is just something really simple but I can't work it out
HTML
<div class="row">
<div class="col-25">
<label for="lname">Type</label>
</div>
<div class="col-75" style="font-size:17px; padding-top:1%;">
<div id="margin" style="margin-right:4%">Image: <input type="checkbox" id="myCheck1" class="check" onclick="myFunction()" name="image"></div><div id="margin" style="margin-right:4%">Video: <input type="checkbox" id="myCheck2" class="check" onclick="myFunction()" name="video"></div><div id="margin" style="margin-right:4%">HTML<a style="color:red">(not currently in use)</a>: <input type="checkbox" id="myCheck3" class="check" onclick="myFunction()" name="html"></div>
</div>
</div>
Javascript
<script>
function checkFunction() {
var checkBox = document.getElementById("myCheck1");
var text = document.getElementById("testing");
var checkBox2 = document.getElementById("myCheck2");
var text2 = document.getElementById("video");
var checkBox3 = document.getElementById("myCheck3");
var text3 = document.getElementById("html");
if (checkBox.checked == true){
text.style.display = "block";
text2.style.display = "none";
text3.style.display = "none";
} else {
text.style.display = "none";
if (checkBox2.checked == true){
text2.style.display = "block";
text.style.display = "none";
text3.style.display = "none";
} else {
text2.style.display = "none";
if (checkBox3.checked == true){
text3.style.display = "block";
text2.style.display = "none";
text.style.display = "none";
} else {
text3.style.display = "none";
text.style.display = "none";
text2.style.display = "none";
}
}
}
}
</script>
</script>
<script type="text/javascript">
$('.check').on('change', function() {
$('.check').not(this).prop('checked', false)
});
</script>
as some people answered you, you should definitely try using some radio buttons instead of checkboxes avoiding completely the need for extra code controlling basic functionality
Check this Out
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<script>
$(document).ready(function(){
$('input.check').on('change', function() {
if($('input.check').is(':checked'))
{
$('input.check').not(this).prop('checked', false);
$('input.check').not(this).parent('div').css('display', 'none');
}
else{
$('input.check').parent('div').css('display', '')
}
})
})
</script>
<body>
<div class="row">
<div class="col-25">
<label for="lname">Type</label>
</div>
<div class="col-75" style="font-size:17px; padding-top:1%;">
<div id="margin" style="margin-right:4%">Image: <input type="checkbox" id="myCheck1" class="check" name="image"></div><div id="margin" style="margin-right:4%">Video: <input type="checkbox" id="myCheck2" class="check" name="video"></div><div id="margin" style="margin-right:4%">HTML<a style="color:red">(not currently in use)</a>: <input type="checkbox" id="myCheck3" class="check" name="html"></div>
</div>
</div>
</body>
</html>
Found an easy way to fix this, other examples sometimes did not work and you would have to click twice, this works perfect.
<script type="text/javascript">
$('.check').on('change', function() {
var text = document.getElementById("testing");
var text2 = document.getElementById("video");
$('.check').not(this).prop('checked', false)
var res = $(this).val();
console.log("res is: " + res);
if (res == '1') {
text.style.display = "block";
text2.style.display = "none";
}
else {
text.style.display = "none";
text2.style.display = "block";
}
});
</script>
I have this simple code, and i can't understand why it is not working.
<div>
<input type="button" class="button" value="Add A Site" onclick="Div();" />
</div>
<script type="text/javascript">
function Div() {
var E = document.getElementsByClassName('Form');
if (E.style.display == 'none') {
E.style.display = 'block';
this.value = "Close";
} else {
S.style.display = 'none';
this.value = "Add A Site";
}
}
</script>
<div class="Form" style="display:none;">
<h1>Example</h1>
</div>
user Form which you are trying to access is inside div.form so you have to access that like below....I tested this, its working. the content in Form is displaying
<input type="button" class="button" value="Add A Site" onclick="Div();" />
<script type="text/javascript">
function Div() {
var E= document.getElementsByClassName('Form')[0];
if (E.style.display=='none'){
E.style.display='block';
this.value="Close";
}else {
S.style.display='none';
this.value="Add A Site";
}
}
</script>
<div class="Form" style="display:none;">
<h1>Example</h1></div>
<script>
function Div() {
var E = document.getElementsByClassName('Form')[0];
if (E.style.display==='none') {
E.style.display='block';
this.value=Close;
} else {
E.style.display = 'none';
this.value = 'Add A Site';
}
}
</script>
<input type="button" class="button" value="Add A Site" onclick="Div()" />
<div class="Form" style="display:none;">
<h1>Example</h1>
</div>
This should work for you.
each of the 3 code snippets 'on.change();' below work individually, but appears to fail when they are all brought onto the same page. I think this has something to do with the 'this.checked' area - it seems this only reads the last one elem3 any suggestions would be amazing. Seeking JS not jQuery.
var elem = document.getElementById('item1'),
checkBox = document.getElementById('check1');
checkBox.checked = false;
checkBox.onchange = function () {
elem.style.display = this.checked ? 'none' : 'block';
document.getElementById("item2").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox.onchange();
var elem2 = document.getElementById('item2'),
checkBox2 = document.getElementById('check2');
checkBox2.checked = false;
checkBox2.onchange = function () {
elem2.style.display = this.checked ? 'none' : 'block';
document.getElementById("item1").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox2.onchange();
var elem3 = document.getElementById('item3'),
checkBox3 = document.getElementById('check3');
checkBox3.checked = false;
checkBox3.onchange = function () {
elem3.style.display = this.checked ? 'none' : 'block';
document.getElementById("item1").style.display = "none";
document.getElementById("item2").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox3.onchange();
the HTML is below; what is supposed to occur is only divs in relation to the checkboxs should show when a checkbox is selected. So if the first checkbox is selected on, that checkbox and it's wrapper should show, if all 4 are checked, these 4 should show. 2, 3 etc. The ones that are not selected should hide. Again my JS code works individually, but when I want to do all on that same page, they fail.
HTML
<div class="container" id="records" style="background-color:#fff">
<br/>
<div class="row" id="item1">
<div class="col-md-8">
<div class=jumbotron>
<h1>Item 1!</h1>
<p>Item 1 Details for the PDF test.</p>
<!-- <p><a class="btn btn-primary btn-lg" href=# role=button>Learn more</a></p>
-->
<input type="checkbox" id="check1" name="sample[]"/> This is a checkbox1</label>
<br />
</div>
</div>
</div>
<div class="row" id="item2">
<div class="col-md-8">
<div class=jumbotron>
<h1>Item 2!</h1>
<p>Item 2 Details for the PDF test.</p>
<!-- <p><a class="btn btn-primary btn-lg" href=# role=button>Learn more</a></p>
-->
<label><input type="checkbox" id="check2" name="sample[]"/> This is a checkbox1</label><br />
</div>
</div>
</div>
<div class="row" id="item3">
<div class="col-md-8">
<div class=jumbotron>
<h1>Item 3!</h1>
<p>Item 3 Details for the PDF test.</p>
<!-- <p><a class="btn btn-primary btn-lg" href=# role=button>Learn more</a></p>
-->
<label><input type="checkbox" id="check3" name="sample[]"/> This is a checkbox1</label><br />
</div>
</div>
</div>
<div class="row" id="item4">
<div class="col-md-8">
<div class=jumbotron>
<h1>Item 4!</h1>
<p>Item 4 I'm a hidden div!</p>
<!-- <p><a class="btn btn-primary btn-lg" href=# role=button>Learn more</a></p>
-->
<label><input type="checkbox" id="check4" name="sample[]"/> This is a checkbox1</label><br />
</div>
</div>
</div>
</div>
<div class="container1">
<div class="row">
<div class="col-md-8">
<p><a class="btn btn-primary btn-lg download-pdf" href="#" role=button>Download PDF</a></p>
</div>
</div>
</div>
Ok, you question is still unclear, and I will update the answer. But if it is working correctly as in John Bupit's https://jsfiddle.net/wz5sxehn/ - your problem is a simple logical error, not a code error.
Is this JSFiddle working the same as your code?
The problem is you are doing this for every element:
elem.style.display = this.checked ? 'none' : 'block';
document.getElementById("item2").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
For every check-box. One will then hide the other while unhiding itself!
See this running as you want to with minimal changes to the code: https://jsfiddle.net/wz5sxehn/3/
With your HTML: https://jsfiddle.net/wz5sxehn/6/
As others have mentioned, your requirements are not crystal clear. Still, I think this code does what you need.
https://jsfiddle.net/6g0ows2g/
var elem = document.getElementById('item1'),
checkBox = document.getElementById('check1'),
elem2 = document.getElementById('item2'),
checkBox2 = document.getElementById('check2'),
elem3 = document.getElementById('item3'),
checkBox3 = document.getElementById('check3'),
elem4 = document.getElementById('item4'),
checkBox4 = document.getElementById('check4');
function updateOptions() {
document.getElementById("item1").style.display = "block";
document.getElementById("item2").style.display = "block";
document.getElementById("item3").style.display = "block";
document.getElementById("item4").style.display = "block";
}
function toggleBlocks(elem, checkBox) {
updateOptions();
checkBox.checked = false;
elem.style.display = "none";
}
checkBox.onchange = function () {
toggleBlocks(elem, checkBox);
};
checkBox2.onchange = function () {
toggleBlocks(elem2, checkBox2);
};
checkBox3.onchange = function () {
toggleBlocks(elem3, checkBox3);
};
checkBox4.onchange = function () {
toggleBlocks(elem4, checkBox4);
};
As a side note, whenever you find yourself repeating a lot of similar code, group that code into a function and use parameters. I find it helps in removing the clutter that hides syntax errors and logic errors.
updateOptions() can be made more elegant, but I'll leave that up to you. Remember, make it work, make it right, make it fast.
I was playing with your code.
As you asked, I've put the 3 code snippets together on the same page and it worked the way it seems to me it was meant to be in your proposal..
The page is always loaded with 'Item-3' visible, because the 'checkBox3.onchange' initiates the elements this way overwriting any previous configuration made by previous 'onchanges'.
(i.e: and at the end of the script 'checkBox3' is configured as unchecked and the item3 as display=block which makes it visible).
if you want to hide item-3 on the page load just uncomment the last line:
//onload (document.getElementById("item3").style.display = "none");
AFAIK, we should avoid mixing javascript and html this way.
Anyway here it goes the code...
I hope it helps (tested on firefox)
<!DOCTYPE HTML>
<html><head><title>Javascript Test</title>
</head>
<body> <h3>Checkbox test</h3>
<form name="CheckBoxes">
<label for="check1">Checkbox 1</label>
<input type="checkbox" name="check1" Id="check1" tabindex="1"><br><br><br>
<label for="check2">Checkbox 2</label>
<input type="checkbox" name="check2" Id="check2" tabindex="2"><br><br><br>
<label for="check3">Checkbox 3</label>
<input type="checkbox" name="check3" Id="check3" tabindex="3"><br><br><br>
</form>
<p id="item1"> Item-1</p><p id="item2"> Item-2</p><p id="item3"> Item-3</p><p id="item4"> Item-4</p>
<script language="javascript">
var elem = document.getElementById('item1'),
// var elem2 = document.getElementById('item2'),
checkBox = document.getElementById('check1');
checkBox.checked = false;
checkBox.onchange = function () {
elem.style.display = this.checked ? 'none' : 'block';
document.getElementById("item2").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox.onchange();
var elem2 = document.getElementById('item2'),
// var elem2 = document.getElementById('item2'),
checkBox2 = document.getElementById('check2');
checkBox2.checked = false;
checkBox2.onchange = function () {
elem2.style.display = this.checked ? 'none' : 'block';
document.getElementById("item1").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox2.onchange();
var elem3 = document.getElementById('item3'),
// var elem2 = document.getElementById('item2'),
checkBox3 = document.getElementById('check3');
checkBox3.checked = false;
checkBox3.onchange = function () {
elem3.style.display = this.checked ? 'none' : 'block';
document.getElementById("item1").style.display = "none";
document.getElementById("item2").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox3.onchange();
//onload (document.getElementById("item3").style.display = "none");
</script>
</body>
</html>
Basically I have signup and signin and I they're both divs which appear and disappear on the click of a link but I wish for one to close if the other is clicked and then opened.
Example:
signin area is open and signup button is clicked. I wish for signin area to disappear and for the signup content to be revealed.
Current Code:
<script language="javascript">
function toggle() {
var ele = document.getElementById("signin");
var text = document.getElementById("signtext");
var ele2 = document.getElementById("signup");
var text2 = document.getElementById("signuptext");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
ele2.style.display = "block";
text2.innerHTML = "hide";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
ele2.style.display = "block";
text2.innerHTML = "hide";
}
}
function toggle2() {
var ele2 = document.getElementById("signup");
var text2 = document.getElementById("signuptext");
var ele = document.getElementById("signin");
var text = document.getElementById("signtext");
if(ele2.style.display == "block") {
ele2.style.display = "none";
text2.innerHTML = "show";
ele.style.display = "block";
text.innerHTML = "hide";
}
else {
ele2.style.display = "block";
text2.innerHTML = "hide";
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
Html :
<div id="signin" style="display: none">
<form action="loginscript.php" method="post">
<p>Username:<input type="text" id="username"></p>
<p>Password:<input type="password" id="password"> <input type="submit" value="submit"></p>
</form>
</div>
<div id="signup" style="display: none">
<h1>peek-a-boo</h1>
</div>
Try this.There is no need of creating two different functions.Lesser the number of functions=Better the code + smarter is the coder!!!!
function toggle(id){
switch(id)
{
case 'signin':
document.getElementById('signin').style.display='block';
document.getElementById('signup').style.display='none';
break;
case 'signup':
document.getElementById('signup').style.display='block';
document.getElementById('signin').style.display='none';
break;
}
HTML
<div id="signin" onclick="toggle(this.id)"> SignIN</div>
<div id="signup" onclick="toggle(this.id)"> SignUp</div>
You can invoke a function on "onclick" event and hide the div using CSS:Visibility property
<a id="myLink" href="#" onclick="MyFunction();">link text</a>
Try this one:
function signUpIn(objId) {
document.getElementById('signin').style.display = 'none';
document.getElementById('signup').style.display = 'none';
document.getElementById(objId).style.display = 'block';
}
Your html changes:
<div id="signin" style="display: block">
</div>
<div id="signup" style="display: none">
</div>
Sign Up
Sign In
Check if it works for you.
Try to grab concept from this, may not be a perfect, but still contain some learning part -
Check this working Fiddle - http://jsfiddle.net/j7LDD/
Working Code -
HTML PART -
<form id="signup" method="get" style="display:none;">
<label>SignUp Name</label>
<input type="text" name="signupname" />
<input type="submit" name="signupsubmit" value="signup" />
</form>
<form id="signin" method="get" style="display:none;">
<label>SignIn Name</label>
<input type="text" name="signinname" />
<input type="submit" name="signinsubmit" value="signin" />
</form>
<button id="signupbutton" onclick="toggle(this.id);">SignUp</button>
<button id="signinbutton" onclick="toggle(this.id);">SignIn</button>
JS PART -
<script>
function toggle( val ) {
if( "signupbutton" == val ) {
document.getElementById("signup").style.display = 'block';
document.getElementById("signin").style.display = 'none';
}
else {
document.getElementById("signin").style.display = 'block';
document.getElementById("signup").style.display = 'none';
}
}
</script>