D3 Examples - cartodb.js change name map parameters on click

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="https://cartodb.com/assets/favicon.ico" />
    
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      .buttons {
          height: 50px;
          width: 100px;
          background: rgba(0,255,255,0.8);
          position: absolute;
          top: 20px;
          right: 20px;
          padding: 5px;
          border: 1px solid #FFF;
          border-radius: 5px;
          cursor: pointer;
      }
     
      
    </style>
​
    <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
    <![endif]-->
​
  </head>
  <body>
    <div id="map"></div>
    <div id="change" class="buttons" data="0">Click here to change value</div>
​
    <!-- include cartodb.js library -->
    <script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
   
    <script>
​
      function main() {
      
      var vari = 6;
       
        // create leaflet map
        var map = L.map('map', { 
          zoomControl: false,
          scrollWheelZoom: false,
          center: [43, 0],
          zoomControl: true,
          zoom: 4
        })
​
        // add a base layer
        L.tileLayer('https://tile.stamen.com/toner/{z}/{x}/{y}.png', {
          attribution: 'Stamen'
        }).addTo(map);
       
        var namedLayerSource = {
          user_name: 'oboix',
          type: 'namedmap',
          named_map: {
             name: "named_maps_variables2",
               layers: [{
                 layer_name: "europe",
                }],
              params:{
                  "x": vari 
                }  
              }
        }
​
        // add cartodb layer with one sublayer
        cartodb.createLayer(map, namedLayerSource)
          .addTo(map)
          .done(function(layer) {
              $("#change").click(function(){
                layer.setParams({
                  "x": 3
                })
              })
​
        })
        .error(function(err) {
            console.log("error: " + err);
        });
      }
​
      window.onload = main; 
​
    </script>
​
  </body>
</html>
    