I am wondering how I can hide all divs on the page only using JavaScript, I cannot use jQuery. Is there a way to do this without using the arrays that comes with document.getElementByTag? Or if there is not, could you show me how to hide all?
Use getElementsByTagName() to get a list of all div elements, and then set their CSS display property to none:
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].style.display = 'none';
}
<div>sads</div>
<div>sads</div>
<span>not a div</span>
You will need to use document.getElementsByTagName, and then use a for loop to process all of the elements:
var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++) {
divs[i].style.display = "none";
}
Just to put out a totally different solution here.
You could set a CSS class to your body, like this
body.hideDivs DIV {
display: none;
}
document.body.className = "hideDivs";
But this would hide everything inside those divs also, which might not be what you are going for here.
Related
document.getElementByClassName('xyz').style.display = 'none';
I am unable to hide class content.
document.getElementsByClassName return an array like object. you can use following script for this
document.getElementsByClassName('xyz')[0].style.display = 'none';
or if you want to hide all .xyz element
var x = document.getElementsByClassName("xyz");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none';
}
function show(){
var element = document.getElementsByClassName('elem');
console.log(element);
element[0].style.display = 'block';
}
.elem {
display: none;
}
<div> visible
<div class="elem">hidden
</div>
<button type="button" onclick="show()">click</button>
</div>
getElementsByClassName returns an array, you can't directly set the style of element like it.
You need to do something like:
let elem = document.getElementsByClassName('xyz')[0];
elem.style.display = 'none';
document.getElementsByClassName elements is a live HTMLCollection of found elements.
<div class="xyz">
test content
</div>
<button type="button" onclick="document.getElementsByClassName('xyz')[0].style.display = 'none';">Hide Content </button>
<button type="button" onclick="document.getElementsByClassName('xyz')[0].style.display = '';">Show Content </button>
$("#afficher_commentaire").change(function(){
// alert("OK");
if($(this).prop("checked") == true){
var commentaire_date_fin_fourniture = document.getElementsByClassName("commentaire_date_fin_fourniture");
for (var i = 0; i < commentaire_date_fin_fourniture.length; i++) {
commentaire_date_fin_fourniture[i].style.display='block';
}
}
else if($(this).prop("checked") == false){
var commentaire_date_fin_fourniture = document.getElementsByClassName("commentaire_date_fin_fourniture");
for (var i = 0; i < commentaire_date_fin_fourniture.length; i++) {
commentaire_date_fin_fourniture[i].style.display='none';
}
}
});
Working version
hide = function(){
document.getElementsByClassName('xyz')[0].style.display="none";
}
<input class="xyz" type="text"/>
<button onclick="hide();">Click to hide!</button>
If you really want to do things this way, then of course first you need to spell getElementsByClassName correctly; you saw this error in the console, right? Then, you need to know that getElementsByClassName returns an array-like things; you saw that in the documentation, right? So you have to loop over it, or take the first element with [0], or whatever.
But in general, it's bad practice to retrieve elements from the DOM like this and set their styles directly. Instead, take advantage of CSS, which will do 90% of the work for you. Here, I'd use a single higher-level class which controls the behavior, and just set that:
<main id="main">
<div class="xyz"></div>
<main>
Then write your CSS as
main.hide-xyz .xyz { display: none; }
To hide the xyz element, then you need a single JS statement:
document.getElementById("main").classList.add("hide-xyz");
To remove it:
document.getElementById("main").classList.remove("hide-xyz");
Or toggle it:
document.getElementById("main").classList.toggle("hide-xyz");
Once you wrap your head around this style, you'll find yourself writing much less JavaScript that needs to all kinds of DOM lookups and loops and setting of styles.
document.getElementsByClassName always returns an array like object. Specify the array[0] number.
Typescript
let hiddenLocales = document.getElementsByClassName('localeMatch') as HTMLCollectionOf<HTMLElement>;
let hideParentNode = hiddenLocales[0]?.parentElement;
hideParentNode?.remove(); // Remove the element
hideParentNode?.style.display = "none"; // Hide the element
This is supposed to be a very simple dropdown FAQ system, I know how to do this in jQuery but I want to learn plain JS.
I just want the individual clicked triggers to toggle the is-visible class to the content divs next to the clicked trigger. Like $(this).next addClass — just in JS.
I've really tried to search for this issue but 90% that shows up is how to do it in jQuery :-p
https://jsfiddle.net/48ea3ruz/
var allTriggers = document.querySelectorAll('.faq-trigger');
for (var i = 0; i < allTriggers.length; i++) {
// access to individual triggers:
var trigger = allTriggers[i];
}
var allContent = document.querySelectorAll('.faq-content');
for (var i = 0; i < allContent.length; i++) {
// access to individual content divs:
var content = allContent[i];
}
// I don't know how to target the faq-content div next to the clicked faq-trigger
this.addEventListener('click', function() {
content.classList.toggle('is-visible');
});
Would really appreciate some advice! :-)
Use nextSibling, when you are iterating .faq-trigger
var allTriggers = document.querySelectorAll('.faq-trigger');
for (var i = 0; i < allTriggers.length; i++) {
allTriggers[i].addEventListener('click', function() {
this.nextSibling.classList.toggle('is-visible');
});
}
nextSibling will also consider text-nodes, try nextElementSibling also
var allTriggers = document.querySelectorAll('.faq-trigger');
for (var i = 0; i < allTriggers.length; i++) {
allTriggers[i].addEventListener('click', function() {
this.nextElementSibling.classList.toggle('is-visible');
});
}
I was looking here: CSS Selector for selecting an element that comes BEFORE another element?
...but wasn't able to find a correct answer for my issue.
Here is a fiddle example: https://jsfiddle.net/Munja/bm576q6j/3/
.test:hover, .test:hover + .test
With this, when I :hover element with .test class, I achieved to change style for current element with .test class and first next element with .test class.
What am I trying to achieve?
When I select any row/column (e.g agent 2), I want to apply same style for ALL elements with that same class (.test in this case).
If it is not possible to achieve this with css only, * I am willing to accept and other good solution.*
Thank you.
In your specific case you can use
tbody:hover > .test {
background: green;
}
fiddle: https://jsfiddle.net/bm576q6j/4/
Note that if you add more classes in the same tbody it will not give what you want. Check also this question: Hover on element and highlight all elements with the same class
So, after waiting for several more hours, I have decided to use JavaScript solution mentioned in answer from #BasvanStein. Posting it here as answer, to make things easier for someone else with same issue.
Here is a working fiddle: https://jsfiddle.net/Munja/bm576q6j/15/
var elms = document.getElementsByClassName("test");
var n = elms.length;
function changeColor(color) {
for(var i = 0; i < n; i ++) {
elms[i].style.backgroundColor = color;
}
}
for(var i = 0; i < n; i ++) {
elms[i].onmouseover = function() {
changeColor("red");
};
elms[i].onmouseout = function() {
changeColor("white");
};
}
I'm trying to hide elements by their ids:
document.getElementById('Table1').style.display = 'none';
But there are many divs goes like Table1, Table2, Table3...
So how to use regular expressions in a situation like this?
Set class to all these elements. It was invented for such cases.
HTML:
<div id="Table1" class="myTables"></div>
<div id="Table2" class="myTables"></div>
<div id="Table3" class="myTables"></div>
JavaScript:
var elements = document.getElementsByClassName("myTables");
for (var i = 0, len = elements.length; i < len; i++) {
elements[i].style.display = "none";
}
UPDATE: If setting classes is not applicable in your case, you can always use the modern method querySelectorAll with attribute starts with selector:
var elements = document.querySelectorAll("div[id^='Table']");
for (var i = 0, len = elements.length; i < len; i++) {
elements[i].style.display = "none";
}
DEMO: http://jsfiddle.net/L2de8/
Regural expression will not work in this example.
Either use a common class name on all the elements, or, if you cannot change HTML, you can use Selectors API to select the elements you need to hide.
Use
var allElemsWithIdStartingFromTable = document.querySelectorAll('[id^="Table"]');
to select all elements with ID starting with "Table", so it would be Table1, Table2, but also TableOfProducts, keep that in mind.
Then you need to iterate over this and check if the id attribute matches /^Table\d+$/ regular expression.
for example..if you give myTables as class name for div..use that for lenght..
var elements = document.getElementsByClassName("myTables");//to know the length only..
for(var i=0;i<elements.length;i++)
{
document.getElementById('Table'+i).style.display = 'none';
}
use looping concept..its an example..
I'm trying to change the name of a link, however, I have some restrictions. The link is placed in code that looks like this:
<li class='time'>
Review Time
<img alt="Styled" src="blah" />
</li>
Basically, I have a class name to work with. I'm not allowed to edit anything in these lines, and I only have a header/footer to write Javascript / CSS in. I'm trying to get Review Time to show up as Time Review, for example.
I know that I can hide it by using .time{ display: hide} in CSS, but I can't figure out a way to replace the text. The text is also a link, as shown. I've tried a variety of replace functions and such in JS, but I'm either doing it wrong, or it doesn't work.
Any help would be appreciated.
You could get the child elements of the li that has the class name you are looking for, and then change the innerHTML of the anchor tags that you find.
For example:
var elements = document.getElementsByClassName("time")[0].getElementsByTagName("a");
for(var i = 0, j = elements.length; i<j; i++){
elements[i].innerHTML = "Time Review";
}
Of course, this assumes that there is one element named "time" on the page. You would also need to be careful about checking for nulls.
Split the words on space, reverse the order, put back together.
var j = $('li.time > a');
var t = j.text();
var a = t.split(' ');
var r = a.reverse();
j.text(r.join(' '));
This could have some nasty consequences in a multilingual situation.
Old school JavaScript:
function replaceLinkText(className, newContents) {
var items = document.getElementsByTagName('LI');
for (var i=0; i<items.length; i++) {
if (items[i].className == className) {
var a = items[i].getElementsByTagName('A');
if (a[0]) a[0].innerHTML = newContents;
}
}
}
replaceLinkText("time", "Review Time");
Note that modern browsers support getElementsByClassName(), which could simplify things a bit.
You can traverse the DOM and modify the Text with the following JavaScript:
var li = document.getElementsByClassName('time');
for (var i = 0; i < li.length; i++) {
li[i].getElementsByTagName('a')[0].innerText = 'new text';
}
Demo: http://jsfiddle.net/KFA58/