The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V < 1 2  
Reply to this topicStart new topic
> CSS Style Issues
Christian J
post Jun 10 2017, 12:21 PM
Post #21


.
********

Group: WDG Moderators
Posts: 7,598
Joined: 10-August 06
Member No.: 7



No you can name it like you want, as long as it's not a reserved word, method name etc. Personally I like to use underscores in my function and variable names to avoid name collisions like that, such as foo_bar instead of fooBar.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
William Grimsley
post Jun 10 2017, 12:43 PM
Post #22


Novice
**

Group: Members
Posts: 26
Joined: 30-May 17
From: Newton Poppleford, Devon, UK
Member No.: 26,424



Hmm, still broken. Getting this error: "Uncaught TypeError: Cannot read property 'className' of undefined
at picked (trends.js:3)
at HTMLLIElement.onclick (trends.php:31)"

The border disappears but doesn't get reapplied, unless I use your exact code! LOL!

This post has been edited by William Grimsley: Jun 10 2017, 01:15 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 10 2017, 01:26 PM
Post #23


.
********

Group: WDG Moderators
Posts: 7,598
Joined: 10-August 06
Member No.: 7



Which code does not work? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
William Grimsley
post Jun 10 2017, 01:51 PM
Post #24


Novice
**

Group: Members
Posts: 26
Joined: 30-May 17
From: Newton Poppleford, Devon, UK
Member No.: 26,424



If I change:

CODE
function styleCurrentButton(clickedButton)
{
    var picked=document.getElementsByClassName('picked');
    picked[0].className=picked[0].className.replace(' picked','');
    clickedButton.className+=' picked';
}


To:

CODE
function picked()
{
    var picked=document.getElementsByClassName('picked');
    picked[0].className=picked[0].className.replace(' picked','');
    clickedButton.className+=' picked';
}


Also, this:

CODE
onclick="changeGraph('temp'); styleCurrentButton(this);">


To:

CODE
onclick="changeGraph('temp'); picked(this);">


Then, it breaks. :/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 10 2017, 03:44 PM
Post #25


.
********

Group: WDG Moderators
Posts: 7,598
Joined: 10-August 06
Member No.: 7



You need the function argument as well (in this case clickedButton), it should look like this:

CODE
function picked(clickedButton)
{
    var picked=document.getElementsByClassName('picked');
    picked[0].className=picked[0].className.replace(' picked','');
    clickedButton.className+=' picked';
}

(basically the this keyword in the function call automatically becomes the clickedButton function argument).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
William Grimsley
post Jun 11 2017, 10:54 AM
Post #26


Novice
**

Group: Members
Posts: 26
Joined: 30-May 17
From: Newton Poppleford, Devon, UK
Member No.: 26,424



Ah, I see! So, you always need clickedButton for this scenario?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 11 2017, 01:51 PM
Post #27


.
********

Group: WDG Moderators
Posts: 7,598
Joined: 10-August 06
Member No.: 7



No you can call clickedButton something else if you want (but the this keyword has special meaning).

As a sidenote, if you use the event.target property you don't need the this keyword, but event.target doesn't seem to work with inline event handlers (i.e., events as HTML attributes) for some reason, so in that case you might have to detect the onclick events from the actual javascript instead. I thought I'd keep it simple by not changing all that...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 12 2017, 06:32 AM
Post #28


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,624
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Jun 11 2017, 08:51 PM) *

As a sidenote, if you use the event.target property you don't need the this keyword, but event.target doesn't seem to work with inline event handlers (i.e., events as HTML attributes) for some reason, so in that case you might have to detect the onclick events from the actual javascript instead. I thought I'd keep it simple by not changing all that...


I don't get the example at Mozilla to work at all... sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 12 2017, 07:09 AM
Post #29


.
********

Group: WDG Moderators
Posts: 7,598
Joined: 10-August 06
Member No.: 7



The one with event.target? Works for me, but it seems to be buggy in all browsers except Opera12 and Firefox: when I click an LI both LIs are hidden, not just the one I clicked.

If I modify the script to use a hardcoded HTML list, it works correctly though. Also if add a border instead of changing visibility.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 12 2017, 07:28 AM
Post #30


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,624
Joined: 9-August 06
Member No.: 6



I tried adding content with innerHTML and I tried using a hardcoded list and removing the part of the script that creates the list.

The simpler example at https://www.w3schools.com/Jsref/event_target.asp works for me as is, but when I tried to replace the alert with something funnier it didn't work.

I'll try FF.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 12 2017, 08:22 AM
Post #31


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,624
Joined: 9-August 06
Member No.: 6



The w3schools example works in FF with for example visibility. The Mozilla one doesn't. Maybe I do something wrong.

Anyway, still early days for this, it seems.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 12 2017, 09:08 AM
Post #32


.
********

Group: WDG Moderators
Posts: 7,598
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Jun 12 2017, 02:28 PM) *

The simpler example at https://www.w3schools.com/Jsref/event_target.asp works for me as is, but when I tried to replace the alert with something funnier it didn't work.

As a sidenote, the onclick attribute in their TryIt Editor sends a parameter called event:

CODE
<body onclick="myFunction(event)">

which is not used in the https://developer.mozilla.org/en-US/docs/We...PI/Event/target example. It seems that event parameter is necessary for inline events, but then you might as well use the this keyword...

https://quirksmode.org/js/events_access.html explains the two models:

QUOTE
if you define an event handler

CODE
element.onclick = doSomething;

the function doSomething() receives the event itself as an argument. Traditionally it is stored in the variable e — though you can use any name you like:

CODE
function doSomething(e) {
    // e gives access to the event
}

...and further down:

QUOTE
In the inline registration model you have to pass the event to the function:

CODE
<pre onclick="doSomething(event)">

function doSomething(e) {
    alert(e.type);
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 12 2017, 12:14 PM
Post #33


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,624
Joined: 9-August 06
Member No.: 6



Didn't know that event handlers as attributes were called inline. Ugly term. I thought you were referring to event handlers on inline elements. blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 12 2017, 02:04 PM
Post #34


.
********

Group: WDG Moderators
Posts: 7,598
Joined: 10-August 06
Member No.: 7



Didn't know either until now. At least it's consistent with inline styles.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 12 2017, 02:56 PM
Post #35


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,624
Joined: 9-August 06
Member No.: 6



It actually is. That term never felt odd, but this does. I claim ESL! ninja.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V < 1 2
Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th July 2017 - 09:41 PM