I'm using mainly Mozilla, but right now i noticed that some codes is not running on Chrome, such as select>option with eventListener.
This is the link of the page: https://musing-jang-0e572c.netlify.com/senate-data.html Check it on both Chrome and Mozilla..
I want this part work also for Chrome. How can i achieve this?
cbs = document.querySelectorAll("input[type=checkbox]");
selector = document.querySelectorAll("#selector option");
(function() {
targets = document.querySelectorAll("#table tr td:nth-child(3)");
newTr = document.querySelectorAll("#table tr");
for (var z = 0; z < cbs.length; z++) {
cbs[z].addEventListener("change", function() {
targets = document.querySelectorAll("#table tr td:nth-child(3)");
newTr = document.querySelectorAll("#table tr");
console.log(newTr);
console.log(targets);
})
}
// DA FIXARE OPTION => CHECKBOX NEW
for (l = 0; l < selector.length; l++) {
selector[l].addEventListener("click", function() {
for (var i = 0; i < targets.length; i++) {
//console.log(i);
newTr[i].classList.add("hide-row");
if (targets[i].innerHTML == this.value && newTr[i].classList.contains("hide-row")) {
//console.log("Match: " + i);
newTr[i].classList.remove("hide-row");
} else if (this.innerHTML === "ALL"){
for (let i = 0; i < targets.length; i++) {
newTr[i].classList.remove("hide-row");
}
}
}
});
}
for (var p = 0; p < cbs.length; p++) {
cbs[p].addEventListener("change", function() {
console.log("Checkbox");
})
}
})();
Semantically, we shouldn't be adding a "click" listener to an option tag. The <select> tag has an "change" event that you can listen to, and then do your appropriate changes when a <option> is changed.
Please refer to this MDN link. Hope this helps.
Related
there is some images with grayscale(1) by default and when you hover on images it should change to grayscale(0), all of this is on css file. but i want when i click on it or when i hover on it, on both situations the image gets grayscale(0) but the hover effect doesn't work. i tried to put the code for grayscale(0) on an addEventListener in another function but it didn't work.
update:
i added codpen link and one line of code.
as you can see from the beginning left person is coloured because i'm showing their info. i want that when i hover on other persons, they get coloured theme while the person that their info is up is still coloured.
link
showInfo(0);
function showInfo(person) {
var img, info, names;
names = document.querySelectorAll('.box h2');
for (let i = 0; i < names.length; i++) {
names[i].style.display = 'none';
}
names[person].style.display = 'block';
info = document.querySelectorAll('.info p');
for (let i = 0; i < info.length; i++) {
info[i].style.display = 'none';
}
info[person].style.display = 'block';
img = document.querySelectorAll('.images img');
for (let i = 0; i < img.length; i++) {
img[i].style.filter= 'grayscale(1)';
}
img[person].style.filter= 'grayscale(0)';
}
I have updated your showInfo function:
function showInfo(person) {
var img, info, names;
names = document.querySelectorAll('.box h2');
for (let i = 0; i < names.length; i++) {
names[i].style.display = 'none';
}
names[person].style.display = 'block';
info = document.querySelectorAll('.info p');
for (let i = 0; i < info.length; i++) {
info[i].style.display = 'none';
}
info[person].style.display = 'block';
img = document.querySelectorAll('.images img');
for (let i = 0; i < img.length; i++) {
img[i].style.filter= '';
}
img[person].style.filter= 'grayscale(0)';
}
showInfo(0);
The change is very small and that gets you to the required behaviour:
for (let i = 0; i < img.length; i++) {
img[i].style.filter= '';
}
Hello i want to remove "Have you served in the military ?" and "No" if Answer is "No" but when it will "Yes" than it should show.
Whatever i have tried but it's not working
<script type="text/javascript">
(function(){
for(i = 0; (a = document.getElementsByTagName("td")[i]); i++){
if(document.getElementsByTagName("span")[i].innerHTML.indexOf('Have you served in the military') > -1){
document.getElementsByTagName("td")[i].style.display = "none";
}
}
})();
</script>
You could use child of the element or just do a find replace or even hide and show.
You can get all td elements like you already did and than get the span elements inside them:
var tds = document.getElementsByTagName('TD');
for (var i = 0, l = tds.length; i != l; ++i) {
var spans = tds[i].getElementsByTagName('SPAN');
for (var j = 0, l2 = spans.length; j != l2; ++j) {
var span = spans[j];
if ((span.textContent = span.innerText).indexOf('Have you served in the military') != -1) {
span.style.display = 'none';
break;
}
}
}
EDIT: OP wants to only delete the span if there is a td with the content "No" (also delete the td element)
var tds = document.getElementsByTagName('TD');
var tdsLength = tds.length;
var answerNoFound = false;
for (var i = 0; i != tdsLength; ++i) {
var td = tds[i];
if ((td.textContent = td.innerText) == 'No') {
td.style.display = 'none';
answerNoFound = true;
break;
}
}
if (answerNoFound)
for (var i = 0; i != tdsLength; ++i) {
var spanFound = false;
var spans = tds[i].getElementsByTagName('SPAN');
for (var j = 0, l = spans.length; j != l; ++j) {
var span = spans[j];
if ((span.textContent = span.innerText).indexOf('Have you served in the military') != -1) {
span.style.display = 'none';
spanFound = true;
break;
}
}
if (spanFound)
break;
}
It looks like you have an application form and document probably has more spans, some outside the td elements, so you don't get correct selection of spans versus td.
So when you are comparing span content, it is most likely not the span that is inside your looped td.
<script type="text/javascript">
(function(){
for(i = 0; (a = document.getElementsByTagName("td")[i]); i++){
if(a.getElementsByTagName("span")[0].innerHTML.indexOf('Have you served in the military') > -1){
a.style.display = "none";
}
}
})();
</script>
I changed the if statement to select span inside your looped td, that should do it.
The loop don't work and I think that's by this, maybe list[i].removeChild(list[i]); I want to remove the list with lt class.
function removeDone () {
var lista = document.getElementsByTagName('li');
for (var i = 0; i < list.length; i++) {
if list[i].classList.contains('lt') {
list[i].removeChild(list[i]);
}
}
}
You may use CSS selecters...
function removeDone() {
var lists = document.querySelectorAll('li.lt');
for (var i = 0; i < lists.length; i++){
lists[i].parentNode.removeChild(lists[i]);
}
}
I am trying to write a javascript for hidding all elements of the class "prewrap", when any image on
the webpage is clicked.
Code so far:
<script type="text/javascript">
function hidepre() {
var elems = document.getElementsByClassName("prewrap");
for (var i = 0; i < elems.length; i++) {
if (elems[i].style.visibility === "hidden") {
elems[i].style.visibility = "visible";
} else {
elems[i].style.visibility = "hidden";
}
}
}
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = "hidepre()";
}
</script>
Jsfiddle: http://jsfiddle.net/aX5kQ/
But this is not working at all, any idea what went wrong?
Your code is working, check this fiddle DEMO
EDIT
Remove the script tag from your jsfiddle leave only the code.
function hidepre() {
var elems = document.getElementsByClassName("prewrap");
for (var i = 0; i < elems.length; i++) {
if (elems[i].style.display === "none") {
elems[i].style.display = "block";
} else {
elems[i].style.display = "none";
}
}
}
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = hidepre;
}
Also in your post this line should be corrected ->
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = hidepre; //this line - here should only be the name of the function without quotes and parentheses
}
It works just fine if you remove the script tag from the JS area of jsfiddle (you put raw javascript in there.. no tags)
edited demo at http://jsfiddle.net/aX5kQ/1/
Hi this code is executed immediately before the image is loaded and so no img is found.
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = "hidepre()";
}
Execute this when the DOM is finished loading with window.onload = ...
I am trying to hide a row which contains in one of the cells a specific span element. The following code is what I have so far - but there is no getElementsByTagName for a tr
What else can I do to get the row? Thanks !
<table id='tableContainer'>
<tr><td><span id='xyz'>Hide</span></td></tr>
<tr><td><span id='abc'>Show</span></td></tr>
</table>
container = document.getElementById('tableContainer');
items = container.getElementsByTagName('tr');
for (var j = 0; j < items.length; j++) {
spans = items.getElementsByTagName('span');
for (var i=0; i<spans.length; i++) {
if (spans.id == 'xyz') {
items.display = 'none';
}
}
}
spans and items are arrays of nodes, so you forgot to get each one by array index, it should be like this,
<table id='tableContainer'>
<tr><td><span id='xyz'>Hide</span></td></tr>
<tr><td><span id='abc'>Show</span></td></tr>
</table>
container = document.getElementById('tableContainer');
items = container.getElementsByTagName('tr');
for (var j = 0; j < items.length; j++) {
spans = items[j].getElementsByTagName('span');
for (var i=0; i<spans.length; i++) {
if (spans[i].id == 'xyz') {
items[j].style.display = 'none';
}
}
}
DEMO
UPDATE:
And don't forget to put style before display.
items[j].display = 'none'; // false
items[j].style.display = 'none'; // true
So let us debug a little:
container = document.getElementById('tableContainer');
console.log(container) //<-- Gives you tag element
items = container.getElementsByTagName('tr');
console.log(items); //<-- Gives you HTML Collection
for (var j = 0; j < items.length; j++) {
spans = items.getElementsByTagName('span'); //<-- error says items.getElementsByTagName is not a function
for (var i=0; i<spans.length; i++) {
if (spans.id == 'xyz') { //<--error here [not referencing index]
items.display = 'none'; //<--error here [not setting style and index]
}
}
}
Problem here is you are not indexing each tr, you are trying to run it on the whole html collection.
spans = items.getElementsByTagName('span');
should be
spans = items[j].getElementsByTagName('span');
You need to do the same thing in the spans loop so the final code would be
container = document.getElementById('tableContainer');
console.log(container) //<-- Gives you tag element
items = container.getElementsByTagName('tr');
console.log(items); //<-- Gives you HTML Collection
for (var j = 0; j < items.length; j++) {
spans = items[j].getElementsByTagName('span'); //<-- use index
items.getElementsByTagName is not a function
for (var i=0; i<spans.length; i++) {
console.log(spans[i].id)
if (spans[i].id == 'xyz') { //<-- use index
items[j].style.display = 'none'; //<-- use index and display
}
}
}
Running example: JSFiddle