Clicking on the title link will open the content in an iframe, but the image

Having trouble with a previous post but I've created a codepen to illustrate the issue. Hoping someone can help me out!

Check out the codepen here: "https://codepen.io/Lossmann/pen/GRrXyQY"

Answer №1

Great news - I've successfully solved the problem! Check out my solution on Code Pen

This snippet is just a taste, so make sure to click the link above for full details.

const title = document.querySelector(".title")
const image = document.querySelector(".image img")

 title.addEventListener('click', (event) => {
    if (event.target.matches('a[href]')) {
      event.preventDefault()
      let url = event.target.getAttribute('href')
      document.getElementById('post').src = url

    }
  })
  image.addEventListener('click', (event) => {
          event.preventDefault()
          let url = event.target.parentNode
          url =  url.getAttribute('href')
   document.getElementById('post').src = url
  })

The key issue was linking the click event function to the image rather than the a tag with the class "image." I also adjusted from querySelectorAll to querySelector since there is only one instance of the classes used. For multiple instances, feel free to switch it back. Additionally, I included styling to ensure that the image class covers the entire image, addressing a previous oversight.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Receiving a null value when attempting to access the ids of dynamically created HTML elements using JavaScript

Encountering issue with accessing ids of dynamically generated HTML elements using javascript In my current project, I am attempting to dynamically alter the ids of div elements and remove buttons that are appended to the parent div. The desired functiona ...

Is there a way to prevent a link from activating when I click on one of its internal elements?

Within a div nested inside an "a" tag (specifically in Link within next.js), there is another div labeled as "like." When clicking anywhere within the main div, the intention is for it to redirect to the destination specified by the "a" tag. However, if th ...

Is there a way to identify all the elements that have properties like border and border-radius applied to them?

When looking for elements with certain properties, you can use queries like this; $$('*[title]') For example, if you want to find elements with a border or border-radius applied, standard queries may not work. $$('*[border-width]') // ...

MVC3 does not support JQuery UI

Just recently, I had all my jquery-ui elements functioning perfectly. However, now it seems that none of the jquery-ui features are working anymore. In my Site.Master page, I have included the following code... <link href="../../Content/Site.css" rel=" ...

Changing the name of a React Native sample application

I am currently working on a project based on this App example: https://github.com/aksonov/react-native-router-flux/tree/master/Example When I tried to change the following lines: index.ios.js import App from './App'; AppRegistry.regist ...

How can we stop mobile email applications from automatically converting emails into a "mobile-friendly" layout without permission?

My email design is optimized to look great on mobile, web, and desktop mail clients. However, I'm facing a challenge with some mobile clients like Gmail on Android automatically reformatting the email to make it more mobile-friendly. This leads to a m ...

A guide to activating tag selection within the DevExtreme tag box

I'm currently utilizing devExtereme within my Angular project. My goal is to enable the selection of text within tags in my tagbox component. Here's what I have implemented: <dx-tag-box [dataSource]="sourves" [value]="value&quo ...

Can I incorporate NodeJS modules such as "oauth" into my Firefox extension?

I am diving into the world of Firefox addons for the first time. My project entails making calls to Twitter's APIs, which means I require an oauth library to kick things off. After some research, I came across an existing library in the npm package r ...

Do we really need TypeScript project references when transpiling with Babel in an Electron project using Webpack?

Currently, I am in the process of setting up my project configuration and have not encountered any errors so far. However, based on my understanding of the Typescript documentation... It appears that Project references are not essential when using babel-l ...

It is not possible to transfer information to a JSON document using node.js filesystem and browserify

In an attempt to convert incoming input data from a form into JSON format for storage without a backend, I am exploring the use of Node.JS module "fs" or "file-system". To make this work in a browser environment, I am using Browserify for bundling as it r ...

Determine if the given text matches the name of the individual associated with a specific identification number

Struggling to create a validation system for two sets of fields. There are 6 inputs in total, with 3 designated for entering a name and the other 3 for an ID number. The validation rule is that if an input with name="RE_SignedByID" contains a value, then c ...

Changing the sliding underline effect in a jQuery navigation bar

Recently, I implemented a sliding underline element in my navigation bar. The idea is that when a link is hovered over, the underline smoothly transitions to that element. You can take a look at the codepen example here: https://codepen.io/lucasengnz/pen/e ...

How to access event.target in Internet Explorer 8 with unobtrusive Javascript

Here is a function that retrieves the target element from a dropdown menu: function getTarget(evt){ var targetElement = null; //if it is a standard browser if (typeof evt.target != 'undefined'){ targetElement = evt.target; } //otherwise ...

Adding custom styles to an unidentified child element in React using Material-UI

When the function below is executed in a loop, I need to include styles for the icon which will be passed as an argument to the function. The icon element will be an unspecified React Material-UI Icon component. const renderStyledCard = (lightMode, headi ...

Using TypeScript's reference function within an HTML document

It feels like ages since my early days of web development. Back when I first started coding, we would reference a script using a <script> tag: <html> <head> <script src="lealet.js"></script> <!-- I know the path isn´t c ...

Guide to integrating the Braintree API with Node.js

I am trying to implement Braintree for website payment gateway, but I encountered an issue while following the online guidelines. The code seems to be incompatible with Node.js. Am I missing something? Index.js: //send token to clients app.get("/client_t ...

Tips on how to horizontally center align a div when using the flex direction column technique

In my design, there is a container that consists of both a table and a div. The div has its display property set to flex with the flex-direction as column. I am trying to horizontally center align the div within the container. Below is the code snippet: ...

Struggling with adding a border to an HTML table?

I am attempting to create a table with alternating borders on the cells. After trying the code below, I still can't seem to get the desired effect. The borders are not showing up at all. Can someone provide guidance on how to achieve this? <style ...

What is the functionality of this JavaScript code after the "if" statement?

I am having trouble understanding how this code works, especially after the if(y in hash) statement. I don't see any values being pushed into hash initially. Can someone explain what happens behind the scenes and the significance of y in hash? var ...

Steps to programmatically update Node modules:

I am looking to incorporate the use of npm update within a script. Take a look at my code snippet below: var npm = require('npm'); npm.load(function () { npm.commands.outdated({json: true}, function (err, data) { //console.log(data); npm ...