How do I hide a div when another divs are present? - javascript

Lately I've been trying to watch/study javascript and got interested in this certain program since I know I'll be able to use it a lot in the future.
I've seen a tutorial on youtube on how to "hide/show" a div so I tweaked it and made it "show/hide" div's and added two more div's. My problem is I wanted to hide other open div's when I want to show a specific one since my code now shows all of the div's regardless of the present ones.
<html>
<head>
<style type="text/css">
#hide_add_fname {
padding: 20px;
background: #f0f0f0;
width: 200px;
display: none;
}
#hide_edit_fname {
padding: 20px;
background: #f0f0f0;
width: 200px;
display: none;
}
#hide_delete_fname {
padding: 20px;
background: #f0f0f0;
width: 200px;
display: none;
}
</style>
<script type="text/javascript">
function toggle_add_fname(id) {
var divelement = document.getElementById(id);
if (divelement.style.display == 'block')
divelement.style.display = 'none';
else
divelement.style.display = 'block';
}
function toggle_edit_fname(id) {
var divelement = document.getElementById(id);
if (divelement.style.display == 'block')
divelement.style.display = 'none';
else
divelement.style.display = 'block';
}
function toggle_delete_fname(id) {
var divelement = document.getElementById(id);
if (divelement.style.display == 'block')
divelement.style.display = 'none';
else
divelement.style.display = 'block';
}
</script>
</head>
<body>
<table border='1'>
<tr>
<td colspan='3'>
<center>First Name</center>
</td>
</tr>
<td>
<button onclick="toggle_add_fname('hide_add_fname');">Add</button>
</td>
<td>
<button onclick="toggle_edit_fname('hide_edit_fname');">Edit</button>
</td>
<td>
<button onclick="toggle_delete_fname('hide_delete_fname');">Delete</button>
</td>
</tr>
</table>
<div id="hide_add_fname">
<form method='POST'>
<center>Add First Name:</center>
<br>
<center>
<input type='text'></input>
</center>
<br>
<center>
<input type='submit' value='Add'>
</center>
</form>
</div>
<div id="hide_edit_fname">
<form method='POST'>
<center>Edit First Name:</center>
<br>
<center>
<input type='text'></input>
</center>
<br>
<center>
<input type='submit' value='Edit'>
</center>
</form>
</div>
<div id="hide_delete_fname">
<form method='POST'>
<center>Delete First Name:</center>
<br>
<center>
<input type='text'></input>
</center>
<br>
<center>
<input type='submit' value='Delete'>
</center>
</form>
</div>
</body>
</html>

try this code
<html>
<head>
<style type="text/css">
#hide_add_fname {
padding: 20px;
background: #f0f0f0;
width: 200px;
display: none;
}
#hide_edit_fname {
padding: 20px;
background: #f0f0f0;
width: 200px;
display: none;
}
#hide_delete_fname {
padding: 20px;
background: #f0f0f0;
width: 200px;
display: none;
}
</style>
<script type="text/javascript">
function toggle_add_fname(id) {
var divelement = document.getElementById(id);
if (divelement.style.display == 'block')
divelement.style.display = 'none';
else{
divelement.style.display = 'block';
document.getElementById('hide_edit_fname').style.display='none';
document.getElementById('hide_delete_fname').style.display='none';
}
}
function toggle_edit_fname(id) {
var divelement = document.getElementById(id);
if (divelement.style.display == 'block')
divelement.style.display = 'none';
else
{
divelement.style.display = 'block';
document.getElementById('hide_add_fname').style.display='none';
document.getElementById('hide_delete_fname').style.display='none';
}
}
function toggle_delete_fname(id) {
var divelement = document.getElementById(id);
if (divelement.style.display == 'block')
divelement.style.display = 'none';
else{
divelement.style.display = 'block';
document.getElementById('hide_add_fname').style.display='none';
document.getElementById('hide_edit_fname').style.display='none';
}
}
</script>
</head>
<body>
<table border='1'>
<tr>
<td colspan='3'>
<center>First Name</center>
</td>
</tr>
<td>
<button onclick="toggle_add_fname('hide_add_fname');">Add</button>
</td>
<td>
<button onclick="toggle_edit_fname('hide_edit_fname');">Edit</button>
</td>
<td>
<button onclick="toggle_delete_fname('hide_delete_fname');">Delete</button>
</td>
</tr>
</table>
<div id="hide_add_fname">
<form method='POST'>
<center>Add First Name:</center>
<br>
<center>
<input type='text'></input>
</center>
<br>
<center>
<input type='submit' value='Add'>
</center>
</form>
</div>
<div id="hide_edit_fname">
<form method='POST'>
<center>Edit First Name:</center>
<br>
<center>
<input type='text'></input>
</center>
<br>
<center>
<input type='submit' value='Edit'>
</center>
</form>
</div>
<div id="hide_delete_fname">
<form method='POST'>
<center>Delete First Name:</center>
<br>
<center>
<input type='text'></input>
</center>
<br>
<center>
<input type='submit' value='Delete'>
</center>
</form>
</div>
</body>
</html>

I would use jquery for this. Since it'll take roughly few lines of code to achieve something like this. But anyways, here's what you could do.
Add a class called divs to all of your divs. And paste this code at the beginning of each of toggle functions.
var myElements = document.querySelectorAll(".divs");
for (var i = 0; i < myElements.length; i++) {
myElements[i].style.display = 'none';
}
You could have the above code in a function and run it at the beginning of your toggle functions, and I recommend you to do this to keep your code cleaner.
Anyways, what I am doing here is hiding every div at the beginning regardless of what was clicked. And then your code will just show the div that needs to be shown. I am not really good at javascript for DOM manipulation. Javascript experts correct me if I am wrong.
EDIT:
I missed the fact that you want to toggle it as well. Here's the updated code.
function hidedivs(){
var myElements = document.querySelectorAll(".divs");
for (var i = 0; i < myElements.length; i++) {
myElements[i].style.display = 'none';
}
}
function toggle_add_fname(id) {
var divelement = document.getElementById(id);
if(divelement.style.display == 'none'){
hidedivs();
}
if(divelement.style.display == 'block')
divelement.style.display = 'none';
else
divelement.style.display = 'block';
}
function toggle_edit_fname(id) {
var divelement = document.getElementById(id);
if(divelement.style.display == 'none'){
hidedivs();
}
if(divelement.style.display == 'block')
divelement.style.display = 'none';
else
divelement.style.display = 'block';
}
function toggle_delete_fname(id) {
var divelement = document.getElementById(id);
if(divelement.style.display == 'none'){
hidedivs();
}
if(divelement.style.display == 'block')
divelement.style.display = 'none';
else
divelement.style.display = 'block';
}

When you need to use the same specific selector more than once, classes are a better choice.
<div id="hide_add_fname" class='fname'>
A flexible way to apply style
var element_list = document.getElementsByClassName(class_name);
for (var i = 0; i < element_list.length; i++) {
element_list[i].style.display = 'none';
}
JSFiddle example
http://jsfiddle.net/83yrf4tx/
More information about IDs and Classes
In CSS what is the difference between "." and "#" when declaring a set of styles?

Related

button to be visible after it fulfilled requirements

Requirements:
When more than one button is clicked, users will then be able to click on "proceed-button".
Current situation:
I am making a cinema web page. Users will get to choose their preferred seats. When the seat is chosen, they will then be able to click on "proceed-button" to pay. However, i have difficulty implementing this function. I know that i needed to use the visibility-hidden function.
The following is my code:
var buttons = document.getElementsByClassName("button");
var count = 0;
var disp = document.getElementById("display");
for (let i = 0, l = buttons.length; i < l; i++) {
buttons[i].addEventListener('click', function() {
buttons[i].classList.toggle('active');
if (this.classList.contains("active")) {
count++;
if (this.classList.contains("active") > 1) {
function proceedButton() {
document.getElementById("pButton").style.display = "visible";
}
} else {
document.getElementById("pButton").style.display = "block";
}
} else {
count--;
}
disp.innerHTML = count;
})
}
function proceedButton() {
var x = document.getElementById("payment-section");
if (x.style.display === "none") {
x.style.display = "block";
}
}
.button {
background-color: #423F3E;
height: 30px;
width: 30px;
margin: 5px;
border-radius: 10px;
border: none;
float: left;
}
.button.active {
background-color: #F7EA00 !important;
}
<div class="seats-layout">
<div class="row">
<input type="button" id="button1" class="button" />
<input type="button" id="button2" class="button" />
<input type="button" id="button3" class="button" />
</div>
<div class="row">
<input type="button" id="button1" class="button" />
<input type="button" id="button2" class="button" />
<input type="button" id="button3" class="button" />
</div>
</div>
<p> Button Clicked <span id="display">0</span> Times</p>
<input type="submit" value="Proceed" onclick="proceedButton()" id="pButton" class="proceed-button" />
```
<div id="payment-section" style="display: none">
<h1>Payment</h1>
</div>
```
Demo page
use document.querySelectorAll to returns all elements in the document that matches a specified CSS selector(s), as a static NodeList object.
function proceedButton() {
var x = document.getElementById("payment-section");
var item_click = document.querySelectorAll('.active').length;
if (item_click>1) {
x.style.display = "block";
}else{
x.style.display = "none";
}
}

Show div upon submit

I am wanting to show a div (depending on the the value input) but I am seeing no errors in the console to point me in the right direction but there is something wrong with my code:
<style type="text/css">
#outputOne{display: none;}
#outputTwo{display: none;}
#outputThree{display: none;}
</style>
</head>
<body>
<form method="POST" onsubmit="return showResults()">
<input type="text" id="valueOne" /><br />
<input type="text" id="valueTwo" /><br />
<input type="text" id="valueThree" /><br />
<input type="submit" id="submit" />
</form>
<div id="outputOne">Value One</div>
<div id="outputTwo">Value Two</div>
<div id="outputThree">Value Three</div>
<script>
function showResults(){
if(value <= 100){
document.getElementById('outputOne').style.display = "block";
return true;
} if(value > 500){
document.getElementById('outputTwo').style.display = "block";
return true;
}if(value > 10000){
document.getElementById('outputThree').style.display = "block";
return true;
}
}
</script>
If you want to see something you should prevent submit by returning false instead of true because now the form will be submited in all the cases and you will never see the div shown since the page will be refreshed.
Hope this helps.
You need to define value variable
And then return false on every if so that div will show on submit otherwise page will refresh and all default setting will be shown
Ok, so there are a few problems:
You never define value inside that function... you need to do that. Second, a form submission will refresh the page, undoing any DOM changes you did. This can be fixed by changing it to a button which calls your function. Here's an updated version of your code that works:
<style type="text/css">
.hide{display: none;}
.show{display: block;}
.submit{height:20px; width: 100px;}
</style>
</head>
<body>
<input type="text" id="valueOne" /><br />
<input type="text" id="valueTwo" /><br />
<input type="text" id="valueThree" /><br />
<button id="submit" class="submit" onClick="showResults()"></button>
<div id="outputOne" class="hide" >Value One</div>
<div id="outputTwo" class="hide" >Value Two</div>
<div id="outputThree" class="hide" >Value Three</div>
<script>
function showResults(){
var value = parseInt(document.getElementById('valueOne').value) + parseInt(document.getElementById('valueTwo').value) + parseInt(document.getElementById('valueThree').value);
if(value <= 100){
document.getElementById('outputOne').className = "show";
} else {
document.getElementById('outputOne').className = "hide";
}
if(value > 500){
document.getElementById('outputTwo').className = "show";
} else {
document.getElementById('outputTwo').className = "hide";
}
if(value > 10000){
document.getElementById('outputThree').className = "show";
} else {
document.getElementById('outputThree').className = "hide";
}
}
</script>
I've also switched the css to use classes, which is a bit more flexible and better practice.
Credit to Zakaria Acharki and mohsin azeem for spotting the form error causing a refresh, and to the always-helpful charlietfl for that and for pointing out my own silly error for the submit button.
Try substituting oninput event for onsubmit event
<head>
<style type="text/css">
#outputOne {
display: none;
}
#outputTwo {
display: none;
}
#outputThree {
display: none;
}
</style>
<script>
function showResults() {
var value = this.value;
console.log(value);
if (value <= 100) {
divs[0].style.display = "block";
divs[1].style.display = divs[2].style.display = "none";
}
if (value > 500) {
divs[1].style.display = "block";
divs[0].style.display = divs[2].style.display = "none";
}
if (value > 10000) {
divs[2].style.display = "block";
divs[0].style.display = divs[1].style.display = "none";
}
}
window.onload = function() {
divs = document.querySelectorAll("div[id^=output]");
Array.prototype.forEach.call(document.forms[0].querySelectorAll("input")
, function(el) {
el.setAttribute("placeholder", "enter a number");
el.oninput = showResults;
});
}
</script>
</head>
<body>
<form method="POST">
<input type="text" id="valueOne" />
<br />
<input type="text" id="valueTwo" />
<br />
<input type="text" id="valueThree" />
<br />
<input type="submit" id="submit" disabled />
</form>
<div id="outputOne">Value One</div>
<div id="outputTwo">Value Two</div>
<div id="outputThree">Value Three</div>
</body>

Displaying a name using Javascript

Am new to javascript and doing my student project. I have created a sample page where user enters the name of a place..
He can enter a maximum of 4 places.. I Just like to have a text of "Place A" on the top when user is entering 1st place and when he clicks on "Add Another Place" then "Place B" needs to be displayed to enter text and same like "Place C" and "Place D".
Here is my code
var i = 0;
function isNumericKey(e) {
if (window.event) {
var charCode = window.event.keyCode;
} else if (e) {
var charCode = e.which;
} else {
return true;
}
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
function add() {
var a = document.getElementById("ad").value;
// alert('Please Enter Details');
if (a != 'null' || a != '') {
i++;
if (i == 1) {
//document.getElementById("input").reset();
document.getElementById("Place1").style.display = "none";
document.getElementById("Place2").style.display = "block";
document.getElementById("Place2").required = true;
document.getElementById("Place3").style.display = "none";
document.getElementById("Place4").style.display = "none";
} else if (i == 2) {
//document.getElementById("input").reset();
document.getElementById("Place1").style.display = "none";
document.getElementById("Place2").style.display = "none";
document.getElementById("Place3").style.display = "block";
document.getElementById("Place3").required = true;
document.getElementById("Place4").style.display = "none";
} else if (i == 3) {
//document.getElementById("input").reset();
document.getElementById("Place1").style.display = "none";
document.getElementById("Place2").style.display = "none";
document.getElementById("Place3").style.display = "none";
document.getElementById("Place4").style.display = "block";
document.getElementById("Place4").required = true;
document.getElementById("ad").style.display = "none";
}
}
}
<form action="abc.php" method="post">
<table width="600" ;>
<tr>
<td><font size=4px><label>Place</label></font>
<br>
<br>
</td>
<td>
<input type="text" name="Place1" id="Place1" value="" style="display:block; width: 20vw;height:30px;font-size:14pt;" onkeypress="return isNumericKey(event);" required="true" />
<br>
</td>
<td>
<input type="text" name="Place2" id="Place2" value="" style="display:none; width: 20vw;height:30px;font-size:14pt;" onkeypress="return isNumericKey(event);" />
<br>
</td>
<td>
<input type="text" name="Place3" id="Place3" value="" style="display:none; width: 20vw;height:30px;font-size:14pt;" onkeypress="return isNumericKey(event);" />
<br>
</td>
<td>
<input type="text" name="Place4" id="Place4" value="" style="display:none; width: 20vw;height:30px;font-size:14pt;" onkeypress="return isNumericKey(event);" />
<br>
</td>
</tr>
<td>
<input type="button" name="Add Another place" id="ad" value="Add Another place" onclick="add();" style="display: block;
height: 25px;
width: 175px;
border-radius: 25px;
background-color: #008CBA;
color: #fff;
border: #008CBA;
cursor: pointer;" />
Let me know how to do this..
There are lots of syntax error in your HTML code, anyways beside that the solution to your problem is quite simple. I have written the following script to acquire the functionality required
<script type="text/javascript">
var i = 1;
function add() {
if (i == 1)
{
document.getElementById("Place1").style.display = "none";
document.getElementById("Place2").style.display = "block";
i++;
}
else if(i==2)
{
document.getElementById("Place2").style.display = "none";
document.getElementById("Place3").style.display = "block";
i++;
}
else if (i == 3) {
document.getElementById("Place3").style.display = "none";
document.getElementById("Place4").style.display = "block";
document.getElementById("ad").style.display = "none";
}
}
</script>
And below is my HTML code
<table>
<tr>
<td><label>Place</label></td>
<td><input type="text" name="Place1" id="Place1" value="" style="display:block; width: 20px;height:30px;font-size:14pt;" placeholder="place1"/></td>
<td><input type="text" name="Place2" id="Place2" value="" style="display:none; width: 20px;height:30px;font-size:14pt;" placeholder="place2" /></td>
<td><input type="text" name="Place3" id="Place3" value="" style="display:none; width: 20px;height:30px;font-size:14pt;" placeholder="place3" /></td>
<td><input type="text" name="Place4" id="Place4" value="" style="display:none; width: 20px;height:30px;font-size:14pt;" placeholder="place4" /></td>
</tr>
<tr>
<td><input type="button" name="Add Another place" id="ad" value="Add Another place" onclick="add();" /></td>
</tr>
Something like that ???
var MAX_PLACES = 4;
var currentEditPlace = 0;
function editPlace(index)
{
var places = document.getElementById('places');
var place = places.getElementsByTagName("li")[index];
place.style.display = 'block';
var span = place.getElementsByTagName("span")[0];
var input = document.createElement('input');
input.setAttribute("type", "text");
input.setAttribute("value", "");
span.appendChild(input)
/** Return key => show next place */
input.onkeydown = function(e) {
/** Validation */
if (this.value != "" && e.keyCode == 13) {
addNewPlace();
}
}
/** Auto focus new input */
input.focus();
}
function addNewPlace() {
if (currentEditPlace+1 < MAX_PLACES) {
currentEditPlace++;
editPlace(currentEditPlace);
}
}
/** Start editing place A */
editPlace(currentEditPlace);
<ul id="places">
<li style="display:none;">Place A: <span></span></li>
<li style="display:none;">Place B: <span></span></li>
<li style="display:none;">Place C: <span></span></li>
<li style="display:none;">Place D: <span></span></li>
</ul>
<input type="button" value="Add new place" onclick="addNewPlace()"/>
you need to add jquery library
<ol></ol>
<button id="btn2">Append list item</button>
try this..
$(document).ready(function(){
$("#btn2").click(function(){
var count_cls = $('.munna').length;
if(count_cls<4)
{
$("ol").append("<li class='munna'>Place "+count_cls+"</li>");
}else
{
alert('max reached');
}
});
});
i have given for li you just change it to button whatever you want
chttK :http://jsfiddle.net/6yLpw9jv/2/

Show Hide div is successfull but page refresh on click. razor

I am able to show/hide div onclick successfully.
But onclick div display for a second and page get refresh.
I have use javascript.
Code:
#{var Count = 0;}
foreach (var commentlist in Model.Comments.Where(x => x.CommentParentID == 0))
{
<div id="#Count" style="display: none;">
<input type="submit" id="reply" class="reply-link" onclick="return showHide(#Count);" value="Reply" />
#{Count++; }
</div>
}
<script type="text/javascript">
function showHide(Count) {
var ele = document.getElementById(Count);
if (ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>
If the submit button is inside a <form> you need to return false from the showHide if you don't want the page to get submitted after clicking on it:
<script type="text/javascript">
function showHide(Count) {
var ele = document.getElementById(Count);
if (ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
return false; // <-- that's important to prevent the page from submitting
}
</script>
Also please bear in mind that an id attribute cannot start with a number in HTML. So please fix your markup:
#{var Count = 0;}
foreach (var commentlist in Model.Comments.Where(x => x.CommentParentID == 0))
{
<div id="mydiv_#Count" style="display: none;">
<input type="submit" id="reply" class="reply-link" onclick="return showHide('mydiv_#Count');" value="Reply" />
#{Count++; }
</div>
}
<script type="text/javascript">
function showHide(id) {
var ele = document.getElementById(id);
if (ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
return false;
}
</script>
It happens because your page is being submitted. Try using <input type="button"...> instead of <input type="submit"...>
Difference here: Difference between <input type='button' /> and <input type='submit' />
And your controls id can't start with a number and must be unique:
#{var Count = 0;}
foreach (var commentlist in Model.Comments.Where(x => x.CommentParentID == 0))
{
<div id="div_#Count" style="display: none;">
<input type="submit" id="reply_#Count" class="reply-link" onclick="return showHide('mydiv_#Count');" value="Reply" />
#{Count++; }
</div>
}

Show/Hide divs, "one by one" and "all at once"

I'm using this to show/hide some divs, at the end I have a button to show the divs one by one.
How can I have a second button to show/hide all of them at once without messing too much with the HTML?
Basically each div contains an input field, so the user clicks the "Add one more" button to get an extra field. By default, all fields are hidden so I need a button to show them all at once (I have 14 divs to show/hide).
Any help will be appreciated.
Javascript
var counter = 0;
var numBoxes = 3;
function toggle4(showHideDiv) {
var ele = document.getElementById(showHideDiv + counter);
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
if(counter == numBoxes) {
document.getElementById("toggleButton").style.display = "none";
}
}
HTML
<table>
<tr>
<td style="width: 150px;">
<div id="box1" style="display: none;">First</div>
</td>
<td style="width: 150px;">
<div id="box2" style="display: none;">Second</div
</td>
<td style="width: 150px;">
<div id="box3" style="display: none;">Third</div
</td>
</tr>
</table>
<input id="toggleButton" type="button" value="Add one more!" onclick="counter++; toggle4('box');">
Here's the basic functionality, though it needs some refinement:
var d = document,
table = d.getElementsByTagName('table')[0],
divs = table.getElementsByTagName('div'),
toggle = d.getElementById('toggleButton'),
allToggle = d.getElementById('allToggle'),
count = 0;
function toggles(){
var elem = divs[count];
elem.style.display = 'block';
count++;
}
toggle.onclick = function(){
toggles();
};
allToggle.onclick = function(){
if (allToggle.getAttribute('data-show') == 1){
for(var i=0,len=divs.length;i<len;i++){
divs[i].style.display = 'none';
allToggle.setAttribute('data-show',0);
allToggle.value = 'Show all';
}
}
else {
for(var i=0,len=divs.length;i<len;i++){
divs[i].style.display = 'block';
allToggle.setAttribute('data-show',1);
allToggle.value = 'Hide all';
}
}
}
​
JS Fiddle demo.
The above based on the following HTML:
<table>
<tr>
<td style="width: 150px;">
<div id="box1" style="display: none;">First</div>
</td>
<td style="width: 150px;">
<div id="box2" style="display: none;">Second</div>
</td>
<td style="width: 150px;">
<div id="box3" style="display: none;">Third</div>
</td>
</tr>
</table>
<input id="toggleButton" type="button" value="Add one more!" />
<input id="allToggle" type="button" value="Show all" />​
have a button with a function that selects all of the divs by a class (that you'll have to add) and hides/shows them. If you just want one button you'll have to remember your state, which in the example below I do with a global.
<button id="showhideall">
$(document).ready(function(){
var allshowing = true;
$("#showhideall").click(function(){
alert(allshowing);
if(allshowing){
$(".foo").hide();
allshowing=false;
} else {
$(".foo").show();
}
});
}​);​
var counter = 0;
var numBoxes = 3;
function toggle4(showHideDiv) {
var ele = document.getElementById(showHideDiv + counter);
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
if(counter == numBoxes) {
document.getElementById("toggleButton").style.display = "none";
}
}
function toggle3(contentDiv) {
if (contentDiv.constructor == Array) {
for(i=0; i < contentDiv.length; i++) {
toggle2(contentDiv[i]);
}
}
else {
toggle2(contentDiv);
}
}
function toggle2(showHideDiv) {
var ele = document.getElementById(showHideDiv);
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
<input id="toggleButton" type="button" value="Show me the money!" onclick="counter++; toggle4('box');">
<input type="button" value="Press me to toggle all 3 DIVs" onClick="toggle3(['box1', 'box2', 'box3']);">

Categories

Resources