Outputting A Javascript Variable To Use In Html

I'm trying to create a javascript/html product configurator where I want to have several stages and output variables into the next stage, lets say: I'm configurating a car, first s

Solution 1:

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() {
        returnthis.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 parmetervar 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.