Outputting a JavaScript variable to use in HTML Outputting a JavaScript variable to use in HTML wordpress wordpress

Outputting a JavaScript variable to use in HTML


You could append the attributes that you want to use on the next page as URL parameters on the link to the next page. Assign variables to each of the URL parameters and then use them on the corresponding pages.

$(function(){ // append the link to the next page with the color URL parameter $('.red-color-selection').on('click',function(){    $('.next-button').attr('href', function() {        return this.href + '?color=red';    }); }); // Get URL Params and turn them into variables $.extend({  getUrlVars: function(){    var vars = [], hash;    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');    for(var i = 0; i < hashes.length; i++)    {      hash = hashes[i].split('=');      vars.push(hash[0]);      vars[hash[0]] = hash[1];    }    return vars;  },  getUrlVar: function(name){    return $.getUrlVars()[name];  } }); // set the carColor variable to the value of the color URL parmeter var carColor = $.getUrlVar('color'); // do stuff down here to set your car's color what the user had selected on the previous page. });

Here's a Fiddle to show you what I mean. After you click the 'RED' link, using dev tools the next button to see that it's updated to include the URL parameter.