/    Sign up×
Community /Pin to ProfileBookmark

Change HTML elements in JavaScript

Copy linkTweet thisAlerts:
Jun 23.2019

Hi!
I am trying to figure how can I make the img and the text change with the img I clicked on and it’s text.
So far I managed to make the image change but not the text. Can you please help me?

https://codepen.io/raul-rogojan/pen/gNWLgq

PS: Also

[code]e.target.style.opacity = opacity;[/code]

doesn’t work as well and I don’t know why .

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumJun 23.2019 — I recommend to use the figure tag as it matches the semantics of your structure exactly: An image with some description. Then attach the eventlistener to the wrapping figure element. Copy it's inner HTML to the main figure element that shows the large image. Thus both, the image and the description, will be shown in the upper region.
Copy linkTweet thisAlerts:
@codyhillauthorJun 24.2019 — @Sempervivum#1605243 I have ruined it , come something is happening tho...
Copy linkTweet thisAlerts:
@SempervivumJun 24.2019 — Only a few lines of Javascript necessary:

https://codepen.io/Sempervivum/pen/BgRMvB?editors=0010
Copy linkTweet thisAlerts:
@codyhillauthorJun 24.2019 — @Sempervivum#1605262 Oh, I think I get it. But from where did you got thumbs ?
Copy linkTweet thisAlerts:
@SempervivumJun 24.2019 — thumbs is just a common term for small images (thumbnails). In the lower part of the page.
Copy linkTweet thisAlerts:
@codyhillauthorJun 24.2019 — @Sempervivum#1605271 Oh , for some reason I thought that the thumbs const was named imgs and I was confused. Sorry :D
×

Success!

Help @codyhill spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.13,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...