How to make a div acting like a button?

How to make a div acting like a button?
0

#1

Hi There,

I just finished the Wikipedia viewer challenge and I would like to add one more detail. it is bugging me to not being able to do it.

I managed to display the result from my wikipedia viewer in div. (I called it class = “test”).

I want people to be able to click anywhere on the div to be directed to the wikipedia page.

I have been looking online for solution, but none of them are working with my code. Maybe because my HTML is writting inside a jquery? I don’t know. I have been trying to put a tag around my div, create a button, but none of this solution worked for me.

Here is the part of my code:

          var str = '';
          for (var i = 0; i < data[1].length; i++){
            
            str += '<div class = "animated slideInUp" ><div class = "test"><h2 class = "title">' + data[1][i] + '</h2><div class = "content">' + data[2][i] +'</div><a class = "link" href = "' + data[3][i] + '" target= "_blank"> See full article </a></div></a>';

            };
         $('.result').html(str);

Will someone be able to help me on this?!

Here is my codepen for this project.

Thank you!

Nicolas


#2

All you have to do is nest the div with class=“animate slideInUp” inside the same anchor you used for the “See full article” link. You currently have the outer </a> tag in the correct place, but are missing the outer <a> tag part.


#3

Hi,

I tried this, and even if it puts the text as a clickable link, it doesn’t work for the entire test div. Only the text part is clickable, and not the space around it inside the div.

Thank you


#4

Your current code does not reflect what I said to do. I just checked your Codepen again and see the following. You only have the text See full article nested in an anchor. That extra </a> on the end of the string is in the correct place for nesting the entire div with class=“animated slideInUp”, but you have not yet added the first part of the anchor tag like you did before the text “See full article”.

for (var i = 0; i < data[1].length; i++){
  str += '<div class = "animated slideInUp" ><div class = "test"><h2 class = "title">' + data[1][i] + '</h2><div class = "content">' + data[2][i] +'</div><a class = "link" href = "' + data[3][i] + '" target= "_blank"> See full article </a></div></a>';
}

#5

Oh I see, i tried, but deleted it as i saw that it wasn’t doing what I was expecting :slight_smile:
I just modified it for you to see.

All the text are acting like link now, but the div itself doesn’t… I’ve been dealing with this issue all morning long and couldn’t find the solution anywhere.


#6

I was mistaken about something I told you. After some research It turns out you can not nest anchors within anchors. My suggestion is to leave the outer anchor in your code and remove the internal anchor. If you still want the text “See full article” and want it to “act” like a link (i.e. change text color), then you can still create a css hover effect. I would change the inner anchor element to a span element and add the hover to the span.

So your JS would look like:

for (var i = 0; i < data[1].length; i++){
  str += '<a href = "' + data[3][i] + '" target= "_blank"><div class = "animated slideInUp" ><div class = "test"><h2 class = "title">' + data[1][i] + '</h2><div class = "content">' + data[2][i] +'</div><span> See full article </span></div></a>';
}

BTW - The above html is missing a </div> for the <div class='animated slideInUp'>

Also, so you can spot missing tags, I suggest reading about Template Literals when creating strings which involve concatenating multiple variables together. Template Literals are especially helpful when creating html, because you can write it it on multiple lines and format it like you would normal html. For example, your for loop could have been written like below using a Template Literal.

        for (var i = 0; i < data[1].length; i++) {
          str += `<a href='${data[3][i]}' target='_blank'>
                    <div class='animated slideInUp'>
                      <div class='test'>
                        <h2 class='title'>${data[1][i]}</h2>
                        <div class='content'>${data[2][i]}</div>
                        <span> See full article </span>
                     </div>
                   </div>
                 </a>`;
        }
        $(".result").html(str);
      }

#7

Thanks a lot for your help! So the anchor on my last line was the problem at the end.
Thanks also for the template literals tip! It will make it easier to understand what the heck I’m doing haha!