CODEWITHSUNDEEP
javascripthtml
SA__
SA__

Reputation: 1862

How to change the attributes of the <script> tag

Here is my script tag

<script
    src="https://checkout.razorpay.com/v1/checkout.js"
    data-key="abcd"
    data-amount="100"
    data-buttontext="Pay with Razorpay"
    data-name="Seven Atara"
    data-description="Website Purchase"
    data-image="https://your-awesome-site.com/your_logo.jpg"
    data-prefill.name="Harshil Mathur"
    data-prefill.email="[email protected]"
    data-theme.color="#F37254"
    id="paymentWidget"
></script>

How can i change the value of data-amount="100" to my desired value

I tried like

document.getElementById("paymentWidget").attr("data-amount") = total

But it is showing error like 

document.getElementById(...).attr is not a function

How can i fix this and set values dynamically ?

Upvotes: 0

Views: 2273

Answers (5)

Abhilash Ravindran C K
Abhilash Ravindran C K

Reputation: 1856

First include reference to the jquery library file. Then rewrite the code as follows,

  $('#paymentWidget').attr("data-amount",desired-value);

Upvotes: 2

Mikhail Katrin
Mikhail Katrin

Reputation: 2384

Try this

document.getElementById('paymentWidget').setAttribute('data-amount', total)

Upvotes: 1

George
George

Reputation: 6739

Your question is tagged with Jquery, but you're using plain JavaScript to get and element from the DOM

Try changing it to use a Jquery selector and setting the attribute correctly

$('#paymentWidget').attr('data-amount', total)

The reason your code isn't working is because you're trying to use the Jquery method .attr on something which isn't a Jquery object.

Alternatively you could use .data

$('#paymentWidget').data('amount', total)

The major difference is that .data will not change the DOM

Upvotes: 1

Maverick
Maverick

Reputation: 886

You can use the dataset. Data set is used when your attribute begins with data-.

In your example:

document.getElementById("paymentWidget").dataset.amount = total;

Support for this is IE>11

For more support use the element.setAttribute("attribute", "value")

Read more on MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

Upvotes: 0

Shayllis Alves de Sousa
Shayllis Alves de Sousa

Reputation: 416

Right function is setAttribute, check its syntax bellow:

document.getElementById("paymentWidget").setAttribute('data-amount', total)

Upvotes: 0

Related Questions