eventlistener JS
i need help with javascript.
here is the code linked: https://codepen.io/gsadopkgj/pen/zYyVPgr
scroll down to the "SUBPAGE CONTENT" comment in the javascript pen.
essentially in the comments i explain what i'm trying to do there.
But here is another explanation of what I'm trying to do anyways: Basically I want the content (header- which is 'description'' by default/associated paragraph -'as a lead mentor i') to change depending on which subpage button the user clicks: (justification / lessons learned / goals)
I'm trying to accomplish this through multiple functions that are called after the event clicker event.
Do I have the right idea? can someone help me please.
24 Replies
The easiest would be having a
data- attribute on the buttons for instance "Goals" would have data-page="goals" and then add event listeners to all buttons that change pages and then use event.target.dataset.page or get the data-page value, and then pass it to whatever function changes the pageThe easiest (but not best) way to do it is to use URLs instead of buttons. Turn each button into an anchor link pointing to the current page but with an ID fragment for the specific bit you want to show.
Next would be to hide the elements by default and add the
:target CSS property to show the one "tab" that's selected.
Since what you're doing is basically tabs, here are a couple resources to get started:
* GMT tabs example
* W3C tabs example
Also, you have your script tag in the middle of the HTML, since you're using the defer attribute it should be in the head.wait
ive done it
like this:
but its not working idk why
check the js subpage content bit now
but it's still not working
and im not sure why
could u help
Because your links are empty and there's no content in your HTML. Using links and the
:target pseudo-class requires actual HTML to work. It's a JS-free solutionim confused
what do u mean there is no content in my html?
there is the description col head 1
that it shld change to justifications from?
The content you want to show needs to be in your HTML, and by default hidden. Then you use the
:target to show it when a link (with an ID fragment) is clicked.ah ok
As I said, using
:target doesn't use JS, it's only HTML/CSS. So you need the content in the HTML or else there's nothing to show. As soon as you bring in JS you should switch to buttons and adding/removing from the DOM. That's why I said it was the easiest but not best way to do it :pive hidden it thru css
Also
document.getElementByID('#col-head-1') should be document.getElementById('col-head-1') (Id and no #). Just don't read the textContent from an element and use that as a variable, at least with dataset it's clear that the specific value means something.
Additionally if you have a load of if statements comparing the same variable, use a switch statement insteadoh ok thanks!
im not doing a js free solution
i want to use js tho
You can combine JS with beck's solution
@lafayette , I don't want to be rude or something (please don't take it like that). But did you ever do a basic html / css course (let alone JS)? I think you are missing some crucial fundamentals. It feels like you are just putting together snippets and you fix things that don't work with other fixes that don't really work either. It's a bit of a mess to be honest.
Again, I don't want to be rude, but I think when you start from the basics, it will be a lot easier for next projects
damn
Also, 0.5em (on 0.8rem, so 0.4rem) minimum font size is evil. h6 is 0.85rem and that's still way too small. You shouldn't go below 1rem. If you want something to have less emphasis you tweak the contrast rather than the size at 1rem. You cannot assume that everyone can read text smaller than 1rem.
Big letters are 4px tall, small are 3px
how do i make it so that when you click on any of the subpages buttons(the buttons on the bottom of the 2nd vertical column)
it swaps places with whatever column header it is currently. (the innerhtml of the button changes as well)
so for example you click justifications button --> you can see rn it changes it so it says 'justificiation' for the header of the columm and the corresponding paragraph. but i want it so that said button clicked changes to descripition, so that they can click back to description if they want to.
do you understand what i'm saying?
code:
https://codepen.io/gsadopkgj/pen/WNLqzZy
hmm ok
i want the description to become a button itself
or whatever
column header is taken out of the equation
so lets say justification was teh header
and then they click on a description button
then description becomes header
and justification takes the description buttons place
and that button is now titled description
i think this is the solution: to have description be a separate div. hidden by default, displayed when the button is clicked, then hidden again when clicked
either way, you just need a new cick event listener on that element
is this right?
im trying to implement
it
im close
but its not working still
scroll down on the js
and click on the justificication etc buttons
i have it small
so it can be read on a mobile device?