Is this possible?

Question

Hi, how can I make whole blog post column clickable. I mean I wan to make pic, post title, image and background clickable with post link.
Website link: https://8bitnews.info/

Answer 1

Another approach would be using an array of blogs in the beginning and looping through it and inserting it in html one by one.

let blogs = [ {...}, {...} ]
blogs.forEach(blog => {
let blogsContainer = document.querySelector(".blogs-container")
// and append new blog to inside it.
// blogsContainer.innerHTML += `
<div class="blog" onclick="func(${blog.id})">
<h1>${blog.title}</h1>
<p>${blog.body}</p>
</body>
`
})

I used backticks ( `` ) not quotes, thats why im able to insert variables within a string using ${variableName}.
I set fhe onclick to "func(theirId)" which you have to create in javascript:

function func(id) {
// describe what happens after user's click.
}

Answer 2

Okay, I try.

Answer 3

Khubaib Mehmood read both of my answers, and decide which one u wanna follow.

Answer 4

if you have wrapped the entire column with one tag (such as <div> or <article> or <section>) just grab that thing element in javascript after giving that element an id or class in html

let blogs = document.querySelectorAll(".blog")

I selected every element with className "blog" and now im gonna go loop through this array and attach a click event to each one.

blogs.forEach(blog => {
blog.onclick = (event) => {
// what happens when you click
// you can access various things from the parameter event we got in this function, such as id of that blog, to know which one was clicked.
}
})

And also, in css, you can write:
.blog {
cursor: pointer;
}
To change the mouse cursor to pointer so that user knows that its clickable

Answer 5

Khubaib Mehmood do you want the whole page click able

Answer 6

No. Every post column. Whole area of dark background.