This question already has answers here:
How to hide "span" if it text is "0" using jQuery?
(4 answers)
Closed 3 years ago.
So I have this function I know how it works but I wanted to ask you guys for help, because I want to make a function that when a variable's result is 0, then I will have a button that will hide all the 0 results. This function is intended for a table (the users will put some numbers, if the number is 0 then I want the button, so the zeros will hide (there will be a lot of zeros)).
function myFunction() {
var x = document.getElementById("p1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<button onclick="myFunction()">Button</button>
<h2 id="p1">Hide-show<h2>
You mean
document.querySelectorAll(".someClass").forEach(
ele => ele.style.display = ele.innerText === "0" ? "none": "block"
);
or
document.querySelectorAll(".someClass").forEach(
ele => if (ele.innerText === "0") ele.innerText = ""
);
jQuery versions in the dupe
Because you have tagged the answer with "jQuery", I would like to improve #mplungjan answers with the jQuery syntax, where you have the hide and show functions:
$(".someClass").hide()
In your case, you can use an attribute:
<table>
<tr data-value=0>...</tr>
</table>
Then you can select all elements with that attribute and show/hide them at once:
$('[data-value="0"]').hide()
Related
This question already has answers here:
JavaScript hide/show element
(13 answers)
Closed 2 years ago.
I'm creating a div element to test hiding and showing an element in JS for my calendar program. I have a function that uses x.style.display to render or hide the div, "info", in the page. But it doesn't work when I test it; when I click the button the "info" div stays on the screen as normal.
function show() {
var divide = document.getElementById("info").innerHTML;
if (divide.style.display === "hidden") {
divide.style.display = "block";
} else {
divide.style.display = "hidden";
}
}
<button onclick="show()">Show/Hide</button>
<div class="info">Testy</div>
You have used innerHtml is use to assign string. So remove that and hide you can use display:none not hidden.
function show() {
var divide = document.getElementById("info");
if (divide.style.display === "none") {
divide.style.display = "block";
} else {
divide.style.display = "none";
}
}
<div id="info">Testy</div>
<button onclick="show()">Show/Hide</button>
I have a query that produces a number of DIV id="toggle_panel" I know I can effectively change the ID of the DIV dynamically.
Below is the script, straight from w3schools, which works great out of the box...for the first DIV and first DIV only. How do I apply a dynamic variable from the query to my script?
Second question: How do I get it so the DIV are hidden by default?
function myFunction() {
var x = document.getElementById("toggle_panel");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
Thank you
For your first question, using a class would be more appropriate to tag a collection similar html elements.
So your divs should look something like this:
<div class="toggle_panel">...</div>
<div class="toggle_panel">...</div>
<div class="toggle_panel">...</div>
You could then use document.getElementsByClassName('toggle_panel') to access them.
Also to hide them by default, you could use css to target your classes as shown below.
.toggle_panel {
display: none;
}
As mentioned in the comments, you can only have one instance of an ID. To achieve the result you want you will have to change the <div id="toggle_panel">content</div> to <div class="toggle_panel">content</div>. Then use the following javascript:
function myFunction() {
var panels = document.getElementsByClassName("toggle_panel");
for(var i = 0; i < panels.length; i++) {
var panel = panels[i];
if (panel.style.display === "none") {
panel.style.display = "block";
} else {
panel.style.display = "none";
}
}
}
I think you should use querySelectorAll('toggle_panel') and your code will be like this:
Array.from(document.querySelectorAll('toggle_panel')).forEach((element) => {
element.display = 'none'
})
This question already has answers here:
Twitter Bootstrap alert message close and open again
(15 answers)
Closed 3 years ago.
I have 3 column of divs in bootstrap, and I can close any div by using-
×
Now I have a side navbar containing the title of the divs that are shown on the body of the page, I want the functionality that on clicking a navbar item , respective div item will re-appear from hidden state.
I tried the following way-
function toggleVisibility(id) {
var x = document.getElementById(id);
if (x.style.display === "none") {
x.style.display = "inline";
} else {
x.style.display = "none";
}
}
But unfortunately it is not even getting called- and thats why I cannot figure out how to run custom onclick command on navbar <a> anchor tags..
My sidenav looks like-
<div id="mySidenav" class="sidenav">
×
<a class="active" href="#home">Overview</a>
<span onclick="toggleVisibility('card1')">Card1</span>
Card2
Card3
</div>
You can see I have used one span and 2 to figure out which one is working- But actually none working.
When the span is in the body of the page it is working correctly , but in the navbar menu items no custom action works.
Here is the jsfiddle to help- https://jsfiddle.net/upyxn7wj/1/
So How to show hidden divs via nav-menu item click-
N.B: I AM USING Rails and this is for rendering the views I have tried the jsfiddle given by showdev in the comments- but its not working
Try adding below code,
function toggleVisibility(id) {
/* START : Code to disable the other div's on click */
var xVal = document.getElementsByClassName("col-md-4");
var i;
for (i = 0; i < xVal.length; i++) {
xVal[i].style.display = "none";
}
/* END: Code to disable the other div's on click */
var x = document.getElementById(id);
if (x.style.display === "none") {
x.style.display = "inline";
} else {
x.style.display = "none";
}
}
instead of "col-md-4" you put one more class name for those div's and use it in the code.
I'm trying to make when some presses a button that only one div is visible at a time. So when they click another button, that corresponding div pops up and the last one hides.
I've tried a for loop:
function display(x) {
for (i=0; i<content.length; i++){
content[i].style.display = 'none';
}
if(x = content[i]){
x.style.display = 'inline';
}
}
This didn't do anything.
I tried nesting the if statement inside the loop, but it caused all to be visible.
I've linked the jsfiddle below.
Please no jQuery answers as I'm trying to learn pure javascript first.
Thanks in advance.
https://jsfiddle.net/ethacker/rp59g9cf/
You are not putting the if inside the loop. Therefore, it will only check the last value of i. Also, the equals should be ==. You should do it like this:
function display(x) {
for (i=0; i<content.length; i++){
if(x == content[i]){
x.style.display = 'inline';
} else {
content[i].style.display = 'none';
}
}
}
see this fiddle example code I slightly modified your code
var currDisplayElm;
//function
function display(content) {
if(currDisplayElm)
currDisplayElm.style.display = 'none';
currDisplayElm = content;
content.style.display = 'inline';
}
As I understand.
Ithink If you call function on click of button then set div Id in sequence and you should pass thet div no which you want to display.
And div name must be same then you can hide other div.
I hope you understand ..
This question already has answers here:
Get selected value in dropdown list using JavaScript
(33 answers)
Closed 9 years ago.
I have this code that get seletedIndex==1 and make the div visible when selectedindex==1, what I want to do is to get the selectvalue not the index. Please teach me please. I'm new in javascript. if(document.frmregister.n_mode.selectedIndex==1) just like this to change selectedIndex==1 into selectvalue?
function BID_RFQ() {
if (document.frmregister.n_mode.selectedIndex == 1) {
document.getElementById("bidrfq").style.visibility = 'visible';
document.getElementById("bidrfq").style.overflow = 'visible';
} else if (document.frmregister.n_mode.selectedIndex == 2) {
document.getElementById("bidrfq").style.visibility = 'visible';
document.getElementById("bidrfq").style.overflow = 'visible';
} else {
document.getElementById("bidrfq").style.visibility = 'hidden';
document.getElementById("bidrfq").style.overflow = 'hidden';
}
return true;
}
You're looking for this, I believe:
document.frmregister.n_mode.options[document.frmregister.n_mode.selectedIndex].value
<html>
<head>
<script>
function BID_RFQ() {
var n_mode = document.getElementById('n_mode');
var bidrfq = document.getElementById('bidrfq');
console.log(n_mode);
/* Here's the important part. */
var selectedOptionValue = n_mode.options[n_mode.selectedIndex].value;
var visibility='visible',overflow='visible';
if (selectedOptionValue != 'One' && selectedOptionValue!='Two') {
visibility=overflow='hidden';
}
bidrfq.style.visibility = visibility;
bidrfq.style.overflow = overflow;
return true;
}
</script>
</head>
<body>
<form id='frmregister'>
<select id='n_mode' onchange='BID_RFQ()'>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</form>
<div id="bidrfq">bidrfq</div>
</body>
</html>
If you want the value of the selected option, you can get it with the .value property of the select element.
console.log(document.frmregister.n_mode.value);
This will automatically give you the .value of the selected option element, or if there's no value defined, it'll give you the .text of the option.
demo: http://jsfiddle.net/WdMTJ/
Note that as #RobG stated below, IE8 and lower will not return the .text if the <option> elements do not have value attributes. As such, you'll want to be certain that the values have been explicitly included.