Jump to content
NextM

Two or more popups with different content

Recommended Posts

Hello!

I'm totally new at js coding and I'm working on a blog site where I translate song lyrics to Hungarian.
I wanted to write some extra info for some of the lyric lines in a popup window, so if someone clicks on the highlighted lines, he/she could read the additional info in the popup window. (It'd be something like genius.com)
I almost succeed with the method I've read here: https://www.w3schools.com/howto/howto_js_popup.asp
But when I tried to make a second popup window with a different text for another lyric line, it showed only the first window, above the first line, with the first text.
I made an example to show my problem: https://www.w3schools.com/code/tryit.asp?filename=FSY26TGIQEXD

Could anyone help me to make two or more different popups on the same page?

(I hope I write to the right place.)

Share this post


Link to post
Share on other sites

Duplicate Identical ID is not allowed as a it is used only to identify a singular specific element within a page. Using 'this' will identify the element the event occurred on, then by using 'children' with index identifier you can target the specific message element

https://www.w3schools.com/code/tryit.asp?filename=FSZ70A83WZ91

Share this post


Link to post
Share on other sites

Thank you!

But it worked only until I didn't want to customize the text style (size, background color, etc).

Edited by NextM

Share this post


Link to post
Share on other sites

First off!, no one EVER uses font element anymore, second! Since the span child is no longer the first child represented by children[0] anymore, but the second child, what did you expect!

Move the span so its the first child again OR change the index to reference the second child.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...