如何将变量从 DOM 脚本传递给 href 链接

Question

I want to pass a variable from java script to html link.

<li hidden><a id="url_call" href='/paytm/response/?response={{response}}' 
value="{{response}}">{{response}}</a></li>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
  var options = {
    "key": "rzp_test_rpDFJlAD0LDl8Y",
    "subscription_id": "{{ sub_id }}",
    "name": "My Billing Label",
    "description": "Auth txn for sub_8seKGNhVEOwnjj",
    "handler": function (response){
      // alert(response.razorpay_payment_id);
      document.getElementById("url_call").click(response);
    }
  };
  var rzp1 = new Razorpay(options);
  document.getElementById('rzp-button').onclick = function(e){
    rzp1.open();
  }
</script> 

In the above code I want to variable response from

 "handler": function (response){
          // alert(response.razorpay_payment_id);
          document.getElementById("url_call").click(response);
        }

to

<li hidden><a id="url_call" href='/paytm/response/?response={{response}}' 
    value="{{response}}">{{response}}</a></li>

I think the way im doing is wrong. Could soemone help me with this? Thanks.

Answer 1

You can set the value of href attribute as:

document.getElementById('url_call').setAttribute('href', '/paytm/response/?response='+response);

Note <a tag does not have value attribute. Click here to learn about valid attributes

If you insist to change the value of value attribute, do this:

document.getElementById('url_call').setAttribute('value', response);

To change the text of <a tag use:

document.getElementById('url_call').innerText = response;

If you want all of the above changes, your final code will look like:

"handler": function (response){
   var el = document.getElementById('url_call');
   el.setAttribute('href', '/paytm/response/?response='+response);
   el.setAttribute('value', response);
   el.innerText = response;
}