Having several problems with this single page app experiment

JavaScript
1

I am experimenting with a single page app, making it from scratch so it has only the code needed. This is an experimental section of the app. I am using Taffy JavaScript DB, which works fine. I have several questions. It is working well as is, but I’ve made concessions. First, see the codepen at https://codepen.io/iPhoneDevLog/pen/rvJQYg

List Item 1
Why do my 4 .buttonItem buttons wrap when I set them at width: 25%? Why do I need to set the .buttonItem width at 23% to keep them 4 across at small screen sizes?

List Item 2
Why wouldn’t these lines hide all of myDIVs having a class of “box”? (commented out in the sample codepen). The idea is to hide the other rows of myDIVs when a button opens its own rows’ myDIV. My workaround is to spell out each div’s ID and close them that way.

var box = document.getElementById('wrapper').getElementsByClassName('box');
box.style='display:hide';

List item 3

. Why wouldn’t these lines move the page up when a lower button is clicked? (commented out in the sample codepen). When I click on a lower row of buttons, I’d like the row of buttons to move up to the top. (Assumption is that there will be more rows of buttons than what you see here.)

var gotopage = "testing-show-hide.html#" + letters;
window.location.assign(gotopage);

List item 4

Is there a shorter way to close all the myDIVs than listing each separately, as used in function close1()? I expect to add more divs, so it would be nice to close them all programmatically. I thought point 2 above would be good here, but it has no effect.

2

#1 - Because you’re breaking the line in your code, which adds in extra spaces between the elements.

#2 - You need to pay attention to what you’re getting back from the methods you’re using. getElementsByClassName returns a Collection, not a single element or node.

So, you need to iterate over the elements. If you’re basing this on jQuery, then under the hood it’s doing the iteration for you. There’s not really any reason to use getElementsByClassName, you should use querySelectorAll.

const box = document.querySelectorAll('#wrapper .box')
1 Like
3

Thanks for #1 and 2!

I’m not using jQuery. I’ll study the ClassName page a bit more and see what I can construct.

4

Yeah, I just meant that what you did is a common thing for people coming from a jQuery world.

I’ll study the ClassName page a bit more and see what I can construct.

Don’t. Study the querySelector and querySelectorAll pages.

5

Heh, I’ve never used Jquery. I know very little JS. I will investigate what you recommended.

1 Like
6

querySelector and querySelectorAll is the way that modern JavaScript has been accessing page elements for at least the past 5 years (it’s existed for about 10), and no other better solutions have come along since.

1 Like
7

This solves problem #2 and 4. Thanks, mawburn.

function close1(){
	var boxes = document.querySelectorAll("div.box"); 
	var i;
	for (i = 0; i < boxes.length; i++) {
		boxes[i].style.display = "none";
	} 
}

Codepen updated. Now working on #3.

8

This should work as well:

 const boxes = document.querySelectorAll('div.box')

 boxes.forEach(function(box) {
   box.style.display = 'none'
 })

It’s also suggested to use let and const instead of var. They are block scoped, where as var is globally/function scoped. This means less weird errors. There is very little reason to use var anymore.

const is kind of a misnomer. You can use const for most things that never get reassigned, but objects and arrays can be mutated. A good case for using let would be your iterator (let i).

I will look at your other issues later tonight when I have more time, if someone else doesn’t get to them first.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.