Changing href target on click with Jquery

JavaScript
1

Hello. I have been having a ton of fun learning Jquery in the past couple of days and wanted to put my knowledge to use! I am currently building a web-app that allows you to search though fonts, preview what it would look like with whatever you want to type, and then click a link that takes you to wherever that font is from. I have everything the way I want it except one detail.

The “Get Font” link inside the modal is where I need help. I want the href to change based on the font you have selected in the form. I was trying to use an if/else statement but I just can’t get it to work. I will link the full codepen below but here is the main segments:

let $font = $(’#font’);
let $get = $(’#get-btn’);

$get.on(‘click’, function () {
let fontName = $font.val();

    if (fontName === "roboto slab") {
        this.href = "https://fonts.google.com/specimen/Roboto+Slab";
    } else if (fontName === 'merriweather') {
        this.href = "https://fonts.google.com/specimen/Merriweather";
    }

});

I wrote this to say "if the current value of the font input (#font) is equal to ‘roboto slab’ then the link (#get-btn).href should take you to “https://fonts.google.com/specimen/Roboto+Slab”. But it doesn’t work at all so I am super wrong somewhere. Here is the full codepen: https://codepen.io/gogocodesmedia/pen/jRYQLb

Any help is appreciated. I am really enjoying this app and this is the last piece of the jquery puzzle!

2

You’re trying to change the href of an anchor when the anchor gets clicked. But what an anchor does is it goes to whatever the link is when you click it. So the link gets clicked, the anchor’s href is blank so clicking it just reloads the same page, the page reloads, the state is reset so the href is blank again and so on.

You can prevent normal behaviour using event.preventDefault() -

.....on('click', function(e) {
  e.preventDefault(); // rest of the behaviour

But this doesn’t solve anything, because then the anchor won’t work.

What you should be doing imo is setting the href of that link when the font is selected, not when the link is clicked. That way you already have an anchor with a valid href.

Also, “Roboto Slab”, not “roboto slab”. & I would think about giving an ID to each font and basing it on that rather than the actual name - if (id1) { href is "examplefonts.com/roboto" etc., it’s too easy to make errors like mistyping the font name in the check. Also - add a default case as well, or prevent the link doing anything if there’s no font selected.

1 Like
3

Do you want to change the location of the page, or do you want to open a new window and set the url on THAT?

If you redirect the current page, you’re inviting the user to leave your page. Not always best practice. :wink:

Using your code, the following does work:

    $get.on('click', function (evt) {
      evt.preventDefault();
      
        let fontName = $font.val().toLowerCase(),
            url;

        if (fontName === "roboto slab") {
          
         url = "https://fonts.google.com/specimen/Roboto+Slab";
        } else if (fontName === 'merriweather') {
         url = "https://fonts.google.com/specimen/Merriweather";
        }
      
      // we only follow the link, if we **have** a link
      if(url){
        window.open(url, "_blank");
      }

    });
4

I tried your code @snowmonkey and I can’t get it to work still. Could you fork my codepen and show me how it works?

6

You were correct @camperextraordinaire I needed to hash it out! I got it to work 100% finally. It took a combo of both answers to get the full result. Now i can finish my web app! Thanks everyone

1 Like
8

Not everyone learns like you Randell. Some people like to see working solutions and see how they work. Which in my experience has been the best way to learn.

9

Well, ish. I learn best by following something, but having something broke – having to break it worse, then figure it out and fix it, teaches me more about what not to do.

It’s not always a learning moment if the student is given the answer. It might have been more appropriate for me to suggest some pseudocode, and leave the actual implementation to the OP.

I was tired, and lazy. :wink: