Page 1 of 1 [ 2 posts ] 

Jon81
Snowy Owl
Snowy Owl

Joined: 4 Jul 2018
Age: 40
Gender: Male
Posts: 133
Location: Sweden

16 Jun 2021, 4:38 pm

My teacher seem to be gone on vacation and I'm really late trying to finish my html course due to my boys being the highest priority (both autistic) and then there are of course my own ADD struggles :skull:

I'm stuck trying to figure out how to manipulate elements using javascript. I have 18 <td> elements that are displayed as boxes, and whenever you click one it will need to change color.

There are some restrictions to the task. We are not allowed to use any javascript directly in the html code and no attributes, so stuff like onclick is not an option. That sucks because I had a solution based on the attribute onclick... 8O

I know it's possible to use document.getElementById("cell-id"), but that way I'd need to code one for each of the 18 cells. That just don't seem to be the way to go. Is there any way I can make the cell-id dynamic? Adding eventListener(click, function(){}) is also a dead end to me as a function call still requires the "id" to be parsed and passed into the javascript function...

In short: is there a way to parse the id of a specific html-element when clicking on the element so I can manipulate the html attributes and set a new background color? Perhaps that's not even the way to go about solving the problem? I am pretty new to Html and javascript so there might be totally off track here approaching the task.


_________________
Din Aspie poäng: 102 av 200
Din neurotypiska (icke-autistiska) poäng: 108 av 200
Du verkar ha både Aspie och neurotypiska drag


Fenn
Veteran
Veteran

User avatar

Joined: 1 Sep 2014
Gender: Male
Posts: 837
Location: Pennsylvania

18 Jun 2021, 4:26 pm

I write javascript a bit like a play piano. When I play piano I start with a tune in my head and I just start hitting keys until I get something that sounds like the tune in my head then keep going one note at a time.

Here are some thoughts. Browsers are all alike and they are all different. Every browser has quirks. Using a javascript library can help to smooth out the differences.

A web page has basically 3 things - the HTML document, the java script and the css.
New browsers have css and javascript built in. I usually start with the html. The one thing I can think of that responds to clicks without fancy javascripts is a form - so in this case I would start by reading the "barebones guide to html" - http://werbach.com/barebones/download.html - for the form elements. The other is a hyperlink - a hyperlink will respond to a click the moment you touch it by going to that page so I would look at the hooks / events related to hyperlinks. If every cell in your table contained a hyperlink with it's x/y co-ords as part of the url (after the question mark or after the hash symbol) but the rest of the url led back to the same page, you could keep state in the query part of the url and use that to drive you javascript behavior.

each html tag (like xml) contains three things: one is the tag name (like HEAD or BODY or A or TD) the second is the attributes, and the third is the set of other elements (and non-element body text) that it contains.

That is IT. Every element tag has JUST those three things. To change colors you need to change the attributes set on the correct elements.


The other thing is that there are standard hooks / events in a page that will run javascript after the whole page is loaded - I forget the names - but basically google for that and then your javascript can change the page by changing the DOM.

The other thing I am thinking is that a html table can be warped around a form before CSS tables were used to format pages, kind of like graph paper. A Table element contains one or more tr elements which contain one or more td elements. A td element can contain just about anything - including another table. I wrote a page once using no images and only nested tables to draw tabs at the top of my page a bit like on the wikipedia. The trick was to create a one cell table inside each cell that I wanted to be a specific size and shape, and set the colors of the table to be the color I wanted the cell to be. I would have to look up the details and do some trial and error to do it again. It was a good trick and addressed the idea that a empty TD renders differently than a TD with something in it.

The last thing is that making a table have a 1 pixel black line between all the cells required several different tricks to make it work in all browsers. I looked for pages on browser marked share and installed the top 3 and then tried everything in all three browsers. Most people only develop using one browser and don't bother to try more than one browser - many flaky web sites have bugs because of this. If you have more time try the top 5 or top 10. The top three is a good number because after that the browsers makers start to work harder to make the "lesser known" browsers work "just like" the leaders. Opera is a good example.

The last thing is DOM and sets. You can identify the cells in your table by pulling all the cells of a given tag into a list and counting until you get to the one you want. You don't have to mark the cells uniquely at all.
HTML in the DOM is a tree structure, and the elements contained inside another element have a fixed order and order is important. That is why your teacher said that you shouldn't mark each cell with unique identifiers. All you have to do is climb up and down the tree and count.

If these ideas don't give you enough to go on ask again and I will try to look up more specific answers.

Also look at code for "fly-over" effects - it may be similar to what you want.

Here are some links that might help:

https://stackoverflow.com/questions/324 ... -td-and-tr

https://stackoverflow.com/questions/193 ... -clickable

https://stackoverflow.com/questions/173 ... javascript

https://www.geeksforgeeks.org/how-to-ch ... avascript/

https://stackoverflow.com/questions/368 ... e-a-td-tag


https://www.w3schools.com/jsref/met_doc ... agname.asp


_________________
ADHD-I(diagnosed) ASD-HF(undiagnosed - maybe)
RDOS scores - Aspie score 131/200 - neurotypical score 69/200 - very likely Aspie