I am trying to build a small program which you enter data into using input fields to build a set of unordered lists containing list items.
I have a checkbox of which that when it is checked, i would like it to display the entire unordered list that contains that bit of text, in this case, atlanta. I would like the rest of the unordered lists which do not contain this text to be set to display: none;
The for loop is the issue, though I have been playing around all day and cannot behave as I would like.
This is the code in question I believe:
checkboxInput.addEventListener('change', (e) => {
const isChecked = e.target.checked;
let ulList = document.getElementsByTagName('ul');
let liList = document.getElementsByTagName('li');
let locationList = document.getElementsByClassName('location');
if (isChecked) {
for (let i = 0; i < ulList.length; i += 1) {
for (let j = 0; j < liList.length; j += 1) {
let ul = ulList[i];
let li = liList[i];
if (li.textContent == 'atlanta') {
ul.style.display = '';
} else {
ul.style.display = 'none';
}
}
}
}
});
Please see a jsFiddle link here.
Any help much appreciated.
A couple of the variables I declared were unnecessary in this piece of code.
The liList variable was replaced with ulList.children.
The second for loop wasn't necessary either.
Here is the eventListener changed to achieve the functionality I required.
checkboxInput.addEventListener('change', (e) => {
const isChecked = e.target.checked;
let ulList = document.getElementsByTagName('ul');
if (isChecked) {
for (let i = 0; i < ulList.length; i += 1) {
let ul = ulList[i];
let liList = ul.children;
let li = liList[1];
if (li.textContent == 'atlanta') {
ul.style.display = 'block';
} else {
ul.style.display = 'none';
}
}
}
});
Thanks to Kris from Treehouse for the answer to this problem.
Related
I'm making an audio player, and I have a list of divs acting as my playlist... I'm using JS to make the list, and I'm using this script to search through them:
/*Search Songs*/
function searchSongs(){
let input = _('#songSearch').value.toLowerCase();
let items = _all('.item');
let dividers = _all(".divider");
for (let i = 0; i < items.length; i++) {
if (!items[i].innerHTML.toLowerCase().includes(input)) {
items[i].style.display = "none";
}
else {
items[i].style.display = "";
}
}
// add noresults message at end if all list divs are hidden
if (!items.innerHTML.toLowerCase().includes(input)) {
_('.noResults').innerHTML = `<p>No results found for "${input}"`
}
}
I have a paragraph element at the end of my list (with nothing in it) and I want to show the message (<p>No results found for "${input}") is there some js I can use to accomplish this? The script above is working for the searching, but not working for the message.
Finished result:
/*Search Songs*/
function searchSongs(){
let input = _('#songSearch').value.toLowerCase();
let items = _all('.item');
let dividers = _all(".divider");
let counter = 0;
for (let i = 0; i < items.length; i++) {
if (!items[i].innerHTML.toLowerCase().includes(input)) {
items[i].style.display = "none";
counter++;
}
else {
items[i].style.display = "";
}
}
// keeping the result 22 letters long (for asthetic purposes)
let maxLen = 22;
if (input.length > maxLen) {
input = input.substring(0, maxLen - 3) + "...";
}
if (counter >= items.length) {
_('#noResults').innerHTML = `No results found for "${input}"` //add no results message if all items are hidden...
} else {
_('#noResults').innerHTML = `` //else hide the message by removing text.
}
}
Thanks, #Asif !!
I've made a little modification in your function. I hope this will solve your issue.
/*Search Songs*/
function searchSongs(){
let input = _('#songSearch').value.toLowerCase();
let items = _all('.item');
let dividers = _all(".divider");
let counter = 0;
for (let i = 0; i < items.length; i++) {
if (!items[i].innerHTML.toLowerCase().includes(input)) {
items[i].style.display = "none";
}
else {
items[i].style.display = "";
counter++;
}
}
// add noresults message at end if all list divs are hidden
if (counter > 0) {
_('.noResults').innerHTML = `<p>No results found for "${input}"`
}
}
I wanted to make a specific form show and the other forms disappear when I click on one of four dropdown buttons. When I tested the code, no from is showing when I clicked on a button.
Here is my javascript code:
function showClass(className)
{
var allItems = document.getElementsByClassName('change-form');
for (var i = 0; i < allItems.length; i++)
{
allItems[i].style.display = "none";
}
var formItems = document.getElementsByClassName(className);
for (var i = 0; i < formItems.length; i++)
{
formItems[i].style.display = "block";
}
}
It shows the form if I remove the top for loop.
Edit: Sorry guys I made a typo
Your code is going in and hiding all the items and then showing them right away. What you want to do is split the hide and show into different functions to trigger them at different times.
function showClass(className)
{
var formItems = document.getElementsByClassName(className);
for (var i = 0; i < formItems.length; i++)
{
formItems[i].style.display = "block";
}
}
function hideClass(className){
var allItems = document.getElementsByClassName(className);
for (var i = 0; i < allItems.length; i++)
{
allItems[i].style.display = "none";
}
}
If you want to be able to swap them with one function you could use this:
function swapHide(className){
var firstItem = document.getElementsByClassName(className)[0];
var isDisplayed = firstItem.style.display == "block"
if(isDisplayed){
hideClass(className);
}else{
showClass(className)
}
}
I have a function that selects all checkboxes (selecionarTodos()) on all pages of a table (#tbTarefas). However, I want to use the same method to select all checkboxes in other tables, which have the same structure, only with different id.
I would like to check if a certain table is rendered at that moment on screen. Something like that.
Before
function selecionarTodos(source) {
const tabela = $("#tbTarefas").DataTable();
let celulasCheckbox = tabela.column(0).nodes();
for (let i = 0; i < celulasCheckbox.length; i++) {
let checkbox = celulasCheckbox[i].querySelector('input[type="checkbox"]');
checkbox.checked = source.checked;
}
}
After (Initial thinking)
function selecionarTodos(source) {
const tabelaTarefas = $("#tbTarefas").DataTable();
const tabelaAtendimento = $("#tbPendentes").DataTable();
if (tabelaTarefas) {
let CheckboxTarefasTd = tabelaTarefas.column(0).nodes();
for (let i = 0; i < CheckboxTarefasTd.length; i++) {
let checkbox = CheckboxTarefasTd[i].querySelector('input[type="checkbox"]');
checkbox.checked = source.checked;
}
}
else if (tabelaAtendimento) {
let CheckboxAtendimentoTd = tabelaAtendimento.column(0).nodes();
for (let i = 0; i < CheckboxAtendimentoTd.length; i++) {
let checkbox = CheckboxAtendimentoTd[i].querySelector('input[type="checkbox"]');
checkbox.checked = source.checked;
}
}
}
Datatables has a callback for once initialization has been completed.
$('#tbTarefas').on( 'init.dt', function () {
}
Or on each redraw use "draw.dt"
I have a function whose destination is to work onClick event.
So, we have for example 4 Span elements and 4 Div elements.
The Spans are Tabs-buttons which I would like to "open" those Divs.
The 1st Span onClick would (open) change the style.display of the 1st Div in "block", from "none", and so on for the next Spans.
This piece of code works very well, but it changes only the design of elements.
function activateSup(s) {
var workTable = s.parentNode.parentNode.parentNode.parentNode.parentNode;
var spans = workTable.getElementsByTagName("span");
var supDivs = workTable.getElementsByClassName("supDiv");
for (var i = 0; i < spans.length; i++) {
spans[i].style.backgroundColor = "";
spans[i].style.border = "";
}
s.style.backgroundColor = "#5eac58";
s.style.border = "2px solid #336633";
}
I've tried to add the code below into my function to achieve what I want, but It does not work.
var getIndex = function(s) {
for (var index = 0; s != s.parentNode.childNodes[index]; index++);
return index;
}
for (var d = 0; d < supDivs.length; d++) {
if (getIndex == d) {
supDivs[d].style.display = "block";
}
else {
supDivs[d].style.display = "none";
}
}
I'm not exactly sure what you're trying to do, but one thing I noticed is this:
var getIndex = function(s) { /* .... */ }
for (var d = 0; d < supDivs.length; d++) {
if (getIndex == d) {
supDivs[d].style.display = "block";
}
else { /* ... */ }
}
This code is comparing getIndex to d, which means it's comparing an integer (d) to the function getIndex, instead of the result of the function call getIndex(spans[d]) (which is an integer, like d).
But what I think you're really trying to do, is getting the index of the clicked <span> so you can show the <div> with the matching index (and hide the rest). To achieve this, the code could be changed like so:
function activateSup(s) {
var workTable = s.parentNode.parentNode.parentNode.parentNode.parentNode;
var spans = workTable.getElementsByTagName("span");
var supDivs = workTable.getElementsByClassName("supDiv");
var index;
for (var i = 0; i < spans.length; i++) {
spans[i].style.backgroundColor = "";
spans[i].style.border = "";
if (s == spans[i])
index = i;
}
s.style.backgroundColor = "#5eac58";
s.style.border = "2px solid #336633";
for (var d = 0; d < supDivs.length; d++) {
if (index == d) {
supDivs[d].style.display = "block";
} else {
supDivs[d].style.display = "none";
}
}
}
Instead of the function getIndex, this just saves the correct index inside the first for loop.
There are many more improvements that could be made to this code, like rewriting it so you don't need that ugly s.parentNode.parentNode.parentNode.parentNode.parentNode and working with CSS classes instead of manually setting the style. But I'll leave that to the reader.
My html5, css, javascript program will be a day calendar. Clicking on the button of an event will bring up the details of that event. Right now, I have a days worth of events in the order they were entered. I'm stuck trying to sort an unordered list of buttons based on their id. Here you can see how each ul button is created. Values come from an indexedDB.
function renderTodo(row) {
var todos = document.getElementById("todoItems");
var li1 = document.createElement("li");
var name = document.createTextNode(row.name);
var li2 = document.createElement("li");
var time = document.createTextNode(row.time);
var btn = document.createElement("BUTTON")
var a = document.createElement("a");
var li = document.createElement("li");
a.addEventListener("click", function() {
helicopter.indexedDB.deleteEvent(row.timeStamp);
}, false);
a.textContent = " [Delete]";
li1.appendChild(name);
li2.appendChild(time);
btn.onclick=viewEvent;
btn.id=row.parent;
btn.row = row;
btn.appendChild(li1);
btn.appendChild(li2);
li.appendChild(btn);
li.appendChild(a);
li.id = row.time;
todos.appendChild(li)
sortUnorderedList(todos);
}
In other words, the finished product looks something like this.
ul-button2-[delete]
ul-button1-[delete]
ul-button3-[delete]
When I convert the list to array, it drops the button and only keeps the two li values. I've tried a few things to no success (see below). Should I drop the button idea and just use CSS to give the same look or is there a good way to sort the buttons.
function sortUnorderedList(ul) {
//if(typeof ul == "string")
//ul = document.getElementById(ul);
// Idiot-proof, remove if you want
if(!ul) {
alert("The UL object is null!");
return;
}
// Get the list items and setup an array for sorting
var lis = ul.getElementsByTagName("LI");
var ali = Array.lis;
ali.sort(liSort);
ul.innerHTML = "";
// Populate the array
for(var i = 0, j = lis.length; i < 2; i++)
ul.appendChild(ali[i]);
// Sort it
//vals.sort(liSort);
//vals.reverse();
// Change the list on the page
//for(var i = 0, l = lis.length; i < l; i++)
//lis[i].innerHTML = vals[i];
}
function liSort(one, two) {
//alert(one.id + " - " two.id);
return one.id - two.id;
}
1.) Because the lis (which should be sorted) have sub-lis, it will be better to select them by class (which is available with html5); so add a class with following line after li.id = row.time;:
li.className = 'sortLi';
2.) In the function select them and convert the list to an array:
var lis = ul.getElementsByClassName("sortLi");
var ali = Array.prototype.slice.call(lis);
3.) Append them now in sorted order:
ali.sort(liSort);
for (var i = 0; i < ali.length; i++) {
ul.appendChild(ali[i]);
}
4.) The sort function:
function liSort(one, two) {
return one.id < two.id ? -1 : ( one.id > two.id ? 1 : 0 );
}
Also see an example.