Attribute reference not being set using the click function in jquery

Question

In my codepen I have two drop downs each with their own links that at currently have a relative url.

The basic structure of the list items look like this:

<ul class="which-way">
    <li class="which-init">Unguided I-Day Return Trips</li>
    <li data-value="value 2" class="cadja"><span class="value">beginners</span><span class="real">Darling Wine & Beer Trip</span></li>
    <li data-value="value 3" class="cadja"><span class="value">mamre-werf-khwa-ttu-culture-day-by-which-way-trips</span><span class="real">Culture & Adventure Trip</span></li>
    <li data-value="value 4" class="cadja"><span class="value">cape-west-coast-wildlife-fossil-trip</span><span class="real">Wildlife & Fossils Trip</span></li>
</ul>

With jquery I manage to get the text inside the span with the class value.

Now I want to add that value to a url when I click on it and the url should look like this for example:

Eg: http://www.google.com/beginners

When I click on the link after clicking on an li, the href does not change.

How can I change the href to the link that I want?

My JS currently looks like this:

$(document).ready(function(){
  $("ul.which-way").on("click", function() {
    $(this).find('li').toggleClass("open-list");
    $(this).find('open-list').css("display", "block");
  });
  $("li.cadja").on("click", function(){ 
    $($(this).parent().find('.which-init')[0]).html($(this).html());
    handleDropdownOne();
  });  
});
window.handleDropdownOne = function() {
  var dropOneValue = $($($('.drowpdown-one').find('.which-init')[0]).find('span.value')[0]).text();
  console.log(dropOneValue);
};
handleDropdownOne();
$('a#trip').on("click", function(){
  $(this).attr("href", "https://www.westcoastway.co.za/"+dropOneValue);
});

Please help

You codepen gives me an error - Uncaught ReferenceError: dropOneValue is not defined. — Tom
– Tom, Commented May 4, 2017 at 13:09
so when you click on "Find Your Trip" you want to add the text value of the drop down after the url? — Keith
– Keith, Commented May 4, 2017 at 13:10
When I click on "Find Your Trip" I want to set the url as www.google.com/"the text value" — Nadj
– Nadj, Commented May 4, 2017 at 13:12
scope of "dropOneValue" becomes limited to window.handleDropdownOne function in your case — Dhaval Pankhaniya
– Dhaval Pankhaniya, Commented May 4, 2017 at 13:16

Dhaval Pankhaniya · Accepted Answer · 2017-05-04 13:12:32Z

1

declare your variable "dropOneValue" outside function

$(document).ready(function() {
$("ul.which-way").on("click", function() {
    $(this).find('li').toggleClass("open-list");
    $(this).find('open-list').css("display", "block");
});
$("li.cadja").on("click", function() {
    $($(this).parent().find('.which-init')[0]).html($(this).html());
    handleDropdownOne();
});
});
var dropOneValue = '';
window.handleDropdownOne = function() {
dropOneValue = $($($('.drowpdown-one').find('.which-init')[0]).find('span.value')[0]).text();
console.log(dropOneValue);
};
handleDropdownOne();
$('a#trip').on("click", function() {
    $(this).attr("href", "https://www.westcoastway.co.za/" + dropOneValue);
});

answered May 4, 2017 at 13:12

Dhaval Pankhaniya

1,9961 gold badge16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nadj Over a year ago

Making the variable global will cause conflict between the two links. If I make a choice on the first link and click, it will work. But as soon as I click i go to the second link, choose whatever I want and click, the value will still carry data from the previous chosen list item. Hope I made some sense.

Collectives™ on Stack Overflow

Attribute reference not being set using the click function in jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related