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

Groups > comp.lang.javascript > #36822 > unrolled thread

Getting the index of a clicked element

Back to article view | Back to comp.lang.javascript

Contents

  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

Page 2 of 2 — ← Prev page 1 [2]

#36834

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.


Better, maybe, to use

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

to bind the answer more closely to the question.

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)"> // .


-- 
  (c) John Stockton, near London, UK.  Using Google Groups.           |
 Mail: J.R.""""""""@physics.org - or as Reply-To, if any.             |

[toc] | [prev] | [next] | [standalone]

#36847

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

[toc] | [prev] | [next] | [standalone]

#36861

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.
> 
> I've got that bit worked out in a way I like (will explain in a separate 
> post). My problem is in identifying the corresponding answer when a 
> question is clicked.
> 
> 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>
> ...

Apart from layout, the following achieves what I think you want to achieve.
As is, the two TD elements in each TR *must* be adjacent enough for the single nextSibling to work.  If you want a different layout, it should only be necessary for the layout within each Q-A pair to be exactly the same, and you can then, onclick, program the needed moves within the DOM tree.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test for Q+A problem</title>

<style type="text/css"> .B { visibility: hidden; } </style>

<script>

function F(T) { var S = T.nextSibling.style
  S.visibility =  (S.visibility=="visible" ? "hidden" : "visible")
  }

</script>

</head>
<body>

<table summary=Test border=1>
<caption>Click Question to toggle Answer</caption>
<tr><td onclick="F(this)">Q1</td><td class=B>A1</td></tr>
<tr><td onclick="F(this)">Q2</td><td class=B>A2</td></tr>
</table>

</body>
</html>

-- 
  (c) John Stockton, near London, UK.  Using Google Groups.           |
 Mail: J.R.""""""""@physics.org - or as Reply-To, if any.             |

[toc] | [prev] | [next] | [standalone]

#36862

dr.j.r.stockton@gmail.com wrote on 10 Jun 2019 in comp.lang.javascript:

>   S.visibility =  (S.visibility=="visible" ? "hidden" : "visible")

Parenteses in error!

var S = T.nextSibling.style;
S.visibility = (S.visibility == "visible") ? "hidden" : "visible";


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#36864

On Monday, 10 June 2019 22:00:31 UTC+1, Evertjan.  wrote:
> JRS wrote on 10 Jun 2019 in comp.lang.javascript:
> 
> >   S.visibility =  (S.visibility=="visible" ? "hidden" : "visible")
> 
> Parenteses in error!
> 
> var S = T.nextSibling.style;
> S.visibility = (S.visibility == "visible") ? "hidden" : "visible";

Neither my parentheses nor yours are needed, at least in current Firefox and Edge.  But your "Parenteses" is in error!

As coded, of course, while the answer is toggled between visible and invisible, the space for the answers is permanently visible.  If the space is also to be toggled, the OP should use 'display' ("block"/"none", IIRC) instead of 'visibility'.

So, ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test for Q+A problem</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

<style type="text/css">
 .A { background : lightblue; }
 .B { visibility: hidden; background : lightgreen; }
 .C { display: none; background : lightgreen; }
 </style>

<script>

function F(T) { var S = T.nextSibling.style
  S.visibility = S.visibility=="visible" ? "hidden" : "visible"
  }

function G(T) { var S = T.nextSibling.style
  S.display = S.display=="block" ? "none" : "block"
  }

</script>

</head>
<body>

<table summary=Test border=1>
<caption>Click Question to toggle Answer</caption>
<tr><td class=A onclick="F(this)">Q1</td><td class=B>A1</td></tr>
<tr><td class=A onclick="F(this)">Q2</td><td class=B>A2</td></tr>
</table>

<ul style="list-style-type: none;">
 <li class=A onclick="F(this)">Q3</li><li class=B>A3</li>
 <li class=A onclick="F(this)">Q4</li><li class=B>A4</li>
</ul>

<ul style="list-style-type: none;">
 <li class=A onclick="G(this)">Q5</li><li class=C>A5</li>
 <li class=A onclick="G(this)">Q6</li><li class=C>A6</li>
</ul>

</body>
</html>

-- 
  (c) John Stockton, near London, UK.  Using Google Groups.           |
 Mail: J.R.""""""""@physics.org - or as Reply-To, if any.             |

[toc] | [prev] | [standalone]

Page 2 of 2 — ← Prev page 1 [2]

Back to top | Article view | comp.lang.javascript

csiph-web