Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #36847

Re: Getting the index of a clicked element

Show all headers | View raw

On 08/06/2019 10:16, dr.j.r.stockton@gmail.com wrote:
> On Friday, 7 June 2019 17:35:49 UTC+1, James Harris  wrote:
>> Almost a complete beginner at JavaScript so there may be a better way to
>> do this but ... what I am trying to do is have a web page consisting of
>> pairs of questions and answers as in
>>
>>     Question
>>       Answer
>>     Question
>>       Answer
>>     Question
>>       Answer
>>
>> where clicking on the question toggles whether the answer appears or
>> not. Answers will initially be absent.
> 
> By which you probably mean invisible.
> 
> 
>> The web page has the form
>>
>> <div class = "question">Why?</div>
>> <div class = "answer">Because</div>
>>
>> <div class = "question">When?</div>
>> <div class = "answer">Soon</div>
> 
> 
>> My question, therefore, is how best to identify the corresponding answer
>> when the user clicks on a question.
>>
>> Any suggestions?
> 
> The following is pseudo-code :-
> 
> Class "answer" should style its element as unshown.
> 
> All of class "question" should have, written in the HTML or added by on-load script, onclick = X(this) where X is a function defined like
> 
>   function X(T) { T.nextSibling.style.shown = not-what-it was }
> 
> It will be necessary to loop through nextSiblings to find the first "answer", if it is possible that there may be another element between the 'div's.

That's what I have done. As some browsers don't have nextElementSibling 
I wrote a simple function to iterate through the siblings until it gets 
the next Element or whatever type.

function next_sibling(from, node_type)
{
   var targ = from;

   // Iterate over the following siblings until we get to one which
   // has the requested type.
   do
   {
     targ = targ.nextSibling;
   }
   while (targ && targ.nodeType !== node_type);

   return targ;
}


> 
> 
> Better, maybe, to use
> 
> <div class = "question">Why?
>   <div class = "answer">Because</div>
>   </div>
> 
> to bind the answer more closely to the question.

I thought about that. It may have helped. But I went with keeping them 
separate. Having the two divs as

   <div class = "question">Why?</div>
   <div class = "answer">Because</div>

if ev is the event as seen in the onclick handler then

   var targ = next_sibling(ev.target, Node.ELEMENT_NODE);

gets from the question to the following answer using the function, above.

> 
> You could finish the question with a button, of value in ["?", "X"], and with button onclick toggling the button value and the shown-ness of the answer. That explains what the user needs to do.
> 
> Here is an on-off button, not connected
> <input type="button" value=0 onclick="this.value^=1"> // Tested.
> 
> Connect it, maybe, by
> <input type="button" value=0 onclick="THAT = (this.value^=1 ? A : B)"> // .

Yes, I'm not sure about styling. Have started a separate thread about 
that but just for info I found this 'accordion' idea which looks quite 
clever.

   https://www.w3schools.com/howto/howto_js_accordion.asp


-- 
James Harris

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Getting the index of a clicked element James Harris <james.harris.1@gmail.com> - 2019-06-07 17:35 +0100
  Re: Getting the index of a clicked element James Harris <james.harris.1@gmail.com> - 2019-06-07 17:59 +0100
    Re: Getting the index of a clicked element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-06-07 20:33 +0200
      Re: Getting the index of a clicked element dr.j.r.stockton@gmail.com - 2019-06-08 01:43 -0700
  Re: Getting the index of a clicked element "R.Wieser" <address@not.available> - 2019-06-07 19:39 +0200
    Re: Getting the index of a clicked element James Harris <james.harris.1@gmail.com> - 2019-06-08 18:52 +0100
  Re: Getting the index of a clicked element Julio Di Egidio <julio@diegidio.name> - 2019-06-07 10:45 -0700
    Re: Getting the index of a clicked element James Harris <james.harris.1@gmail.com> - 2019-06-08 18:57 +0100
      Re: Getting the index of a clicked element Julio Di Egidio <julio@diegidio.name> - 2019-06-09 05:44 -0700
  Re: Getting the index of a clicked element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-06-07 20:16 +0200
    Re: Getting the index of a clicked element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-06-07 22:48 +0200
  Re: Getting the index of a clicked element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-06-07 20:36 +0200
  Re: Getting the index of a clicked element JJ <jj4public@vfemail.net> - 2019-06-08 12:57 +0700
    Re: Getting the index of a clicked element James Harris <james.harris.1@gmail.com> - 2019-06-08 10:30 +0100
      Re: Getting the index of a clicked element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-06-08 12:13 +0200
        Re: Getting the index of a clicked element John G Harris <niam@jghnorth.org.uk.invalid> - 2019-06-08 13:35 +0100
        Re: Getting the index of a clicked element John G Harris <niam@jghnorth.org.uk.invalid> - 2019-06-08 13:45 +0100
        Re: Getting the index of a clicked element James Harris <james.harris.1@gmail.com> - 2019-06-08 19:03 +0100
          Re: Getting the index of a clicked element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-06-08 21:11 +0200
            Re: Getting the index of a clicked element dr.j.r.stockton@gmail.com - 2019-06-08 14:18 -0700
  Re: Getting the index of a clicked element dr.j.r.stockton@gmail.com - 2019-06-08 02:16 -0700
    Re: Getting the index of a clicked element James Harris <james.harris.1@gmail.com> - 2019-06-08 19:14 +0100
  Re: Getting the index of a clicked element dr.j.r.stockton@gmail.com - 2019-06-10 11:29 -0700
    Re: Getting the index of a clicked element "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-06-10 23:00 +0200
      Re: Getting the index of a clicked element dr.j.r.stockton@gmail.com - 2019-06-11 03:22 -0700

csiph-web