Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]
Groups > comp.lang.javascript > #36835
| From | James Harris <james.harris.1@gmail.com> |
|---|---|
| Newsgroups | comp.lang.javascript |
| Subject | Re: Getting the index of a clicked element |
| Date | 2019-06-08 10:30 +0100 |
| Organization | A noiseless patient Spider |
| Message-ID | <qdfv79$dvn$1@dont-email.me> (permalink) |
| References | <qde3ou$aqm$1@dont-email.me> <rzu6rgkcx0ct.be7zd8a6ci7q.dlg@40tude.net> |
On 08/06/2019 06:57, JJ wrote:
> On Fri, 7 Jun 2019 17:35:40 +0100, James Harris wrote:
...
>> <div class = "question">Why?</div>
>> <div class = "answer">Because</div>
>>
>> <div class = "question">When?</div>
>> <div class = "answer">Soon</div>
...
> With that HTML structure, you can setup the click event handler like below.
>
> addEventListener("click", e => {
> e = e.target;
> if (e.classList.contains("question")) {
> e = e.nextElementSibling.style;
> e.display = e.display ? "" : "block";
> }
> });
>
Good answer.
Were there any browsers which supported JavaScript but not the .style
property?
FWIW I got the system to work as I want it to. The complete code is
below. Your answer may be better but I quite like what I came up with.
I am not familiar with JavaScript so folks reading the code may find
things they don't like or which could be better. Feel free to criticise
it. Note that I avoided nextElementSibling for compatibility.
<script type = "text/javascript">
/**********************************************************************
*
* Globals
*
**********************************************************************/
var saved_answers = []; //Answers saved from the HTML
var BLANK_ANSWER = ""; //The inner HTML to use when answer missing
var QCLASS = "question"; //The element class to use for questions
var ACLASS = "answer"; //The element class to use for answers
var QID = "Q-"; //The prefix to set on question ids
/**********************************************************************
*
* Hide all the answers (if JavaScript is supported)
*
**********************************************************************/
function all_hide()
{
var targ;
var i = 0;
var questions = document.getElementsByClassName(QCLASS);
for (question of questions)
{
targ = next_sibling(question, Node.ELEMENT_NODE);
if (targ && targ.className === ACLASS)
{
question.id = QID + i;
saved_answers[question.id] = targ.innerHTML;
targ.innerHTML = BLANK_ANSWER;
i++;
}
}
}
/**********************************************************************
*
* Make each question clickable
*
**********************************************************************/
function questions_make_clickable()
{
var questions = document.getElementsByClassName(QCLASS);
for (question of questions)
{
question.addEventListener("click", qclick);
}
}
/**********************************************************************
*
* Find the next sibling of a specified type. Use this in preference to
* nextElementSibling if wanting compatibility with browsers which do
* not support that function.
*
**********************************************************************/
function next_sibling(from, node_type)
{
var targ = from;
do
{
targ = targ.nextSibling;
}
while (targ && targ.nodeType !== node_type);
return targ;
}
/**********************************************************************
*
* Respond to a click on a question
*
**********************************************************************/
function qclick(ev)
{
var targ = next_sibling(ev.target, Node.ELEMENT_NODE);
if (targ && targ.className === ACLASS)
{
// Toggle the answer
if (targ.innerHTML === BLANK_ANSWER)
{
targ.innerHTML = saved_answers['' + ev.target.id];
}
else
{
targ.innerHTML = BLANK_ANSWER;
}
}
}
/**********************************************************************
*
* Code to run on page load
*
**********************************************************************/
window.addEventListener(
'DOMContentLoaded', (event) =>
{
all_hide();
questions_make_clickable();
}
);
</script>
--
James Harris
Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll 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