NextM Posted July 5, 2018 Share Posted July 5, 2018 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.) Link to comment Share on other sites More sharing options...
dsonesuk Posted July 5, 2018 Share Posted July 5, 2018 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 Link to comment Share on other sites More sharing options...
NextM Posted July 5, 2018 Author Share Posted July 5, 2018 (edited) Thank you! But it worked only until I didn't want to customize the text style (size, background color, etc). Edited July 5, 2018 by NextM Link to comment Share on other sites More sharing options...
dsonesuk Posted July 5, 2018 Share Posted July 5, 2018 WHAT??????? Link to comment Share on other sites More sharing options...
NextM Posted July 5, 2018 Author Share Posted July 5, 2018 I made the text smaller and bold and it's not working now: https://www.w3schools.com/code/tryit.asp?filename=FSZMW3144BKC Link to comment Share on other sites More sharing options...
dsonesuk Posted July 5, 2018 Share Posted July 5, 2018 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now