Re- assigning custom variable inside script tag in a .hbs

I am trying to re assign a variable using script tag inside an .hbs file and using that variable to pass via url. here is my hbs file code and helpers method.

I have tried the below code.


{{setVar "size" "S"}}
 {{@root.size}}

***<script>
    function check(t){
        var id = t.id;
        const d = String(document.getElementById(id).value);
        {{{ setVar "size" d }}}
        alert(d " " id);
    }
</script>***
{{size}}


 <a href="/cart/add-to-cart/{{this._id}}/***{{@root.size}}***" >

and my helpers in app.js

var hbs = expressHbs.create({
  defaultLayout: 'layout',
  extname: '.hbs',
  helpers: {
    calculation: function(value){
      return value*5;
    },
    select: function(selected, options){
      return options.fn(this).replace(
        new RegExp(' value=\"'   selected   '\"'),
        '$& selected="selected"');
    },
    setVar: function(varName, varValue, options){
      if (!options.data.root) {
        options.data.root = {};
    }
    options.data.root[varName] = varValue;
    },
    json: function(content){
      // if (content != '')
        return JSON.stringify(content);
    }
  }
});

CodePudding user response：

It looks like you are trying to set a variable in your Handlebars template and then use that variable in an anchor tag's href attribute.

The setVar helper function seems to be set up correctly to allow you to set a variable in your template. To use the setVar helper, you can include it in your template like this:

{{setVar "size" "S"}}

This will set a variable called size to the value "S". You can then use the size variable in your template by using the {{@root.size}} expression.

In your script tag, it looks like you are trying to set the size variable to the value of an input element with an id attribute. To do this, you can use the following code:

function check(t){
  var id = t.id;
  const d = String(document.getElementById(id).value);
  Handlebars.helpers.setVar("size", d);
  alert(d " " id);
}

This will set the size variable to the value of the input element with the specified id when the check function is called. You can then use the size variable in your anchor tag's href attribute like this:

<a href="/cart/add-to-cart/{{this._id}}/{{@root.size}}" >

<script>
  function updateHref(size) {
    const anchor = document.querySelector('.btn-success');
    anchor.href = '/cart/add-to-cart/{{this._id}}/'   size;
  }
</script>

<a href="/cart/add-to-cart/{{this._id}}/{{@root.size}}" >

<!-- Update the href attribute when the "check" function is called -->
<input type="button" onclick="check(this); updateHref({{@root.size}});" value="Update" id="updateButton">

This code uses a JavaScript function called updateHref to update the href attribute of the anchor tag directly. The updateHref function is called when the "check" function is called, and it receives the updated value of the size variable as an argument.