将变量从 HTML 传递到使用 addEventListener 的 Javascript 文件

Question

I'm using Stripe to accept Apple pay payments (not super important here).我正在使用 Stripe 接受 Apple 支付（这里不是很重要）。 I'm using Django.我正在使用 Django。 The code works fine for processing the payments, but I'm having trouble passing in a variable to my separate .js file.该代码可以正常处理付款，但我无法将变量传递给我单独的 .js 文件。 (amount to charge) from my HTML file to the Javascript file that actually processes the payments. （收费金额）从我的 HTML 文件到实际处理付款的 Javascript 文件。

home.html主页.html

{% load static %}
<!DOCTYPE html>
<html>
<head>
    import more scripts here
    <script src="https://js.stripe.com/v3/"></script>
    <script src="{% static 'interface/utils.js' %}" defer></script>
    <script src="{% static 'interface/apple-pay.js' %}" defer></script>
</head>
<body>
    <header class="text-center">
        <div id="rectangle"></div>
    </header>
    <section>
        <div class="text-center">
            <div class="container container--narrow">
                <script>amount=parseInt("{{event.price}}")</script>
                <div id="payment-request-button">
                    <!-- A Stripe Element will be inserted here if the browser supports this type of payment method. -->
                </div>
            </div>            
        </div>
    </section>
</body>
</html>

The Javascript file that gets called to process the payment: apple-pay.js被调用以处理付款的 Javascript 文件： apple-pay.js

document.addEventListener('DOMContentLoaded', async () => {
    const stripe = Stripe('pk_test_testkey');

    const paymentRequest = stripe.paymentRequest() ({
        currency: 'usd',
        country: 'US',
        requestPayerName: true,
        requestPayerEmail: true,
        total: {
            label: 'Test payment',
            amount: amount, //trying to pass the variable in here
        }
    });

  // Other functions that get called go here
});

The error I see in the console is that 'total' in the API call is no longer an object.我在控制台中看到的错误是 API 调用中的“total”不再是一个对象。 Console.log(typeof amount) returns a number and console.log(amount) returns the number I expect. Console.log(typeof amount) 返回一个数字，console.log(amount) 返回我期望的数字。 But how do I pass that to the Javascript file?但是我如何将它传递给 Javascript 文件呢？

Answer 1

Use data attributes.使用data属性。 The way you're currently doing it could theoretically work if you rigged it up just right, but it's definitely not the best practice.如果你把它安装得恰到好处，你目前的做法理论上是可行的，但这绝对不是最佳做法。 An easy solution is:一个简单的解决方案是：

Instead of this code,而不是这段代码，

<script>amount=parseInt("{{event.price}}")</script>

just attach a data-amount attribute to an element near the tree.只需将data-amount属性附加到树附近的元素即可。 You might even be able to get away with putting it on the payment-request-button like this:您甚至可以像这样将其放在payment-request-button上：

<div id="payment-request-button" data-amount="{{event.price}}">

Then in your javascript:然后在你的javascript中：

//...
    amount: parseInt(document.querySelector("#payment-request-button").dataset.amount)
//...

If you can't edit the javascript file then things are a lot more complicated, so I hope you can!如果您无法编辑 javascript 文件，那么事情会复杂得多，所以我希望您可以！

将变量从 HTML 传递到使用 addEventListener 的 Javascript 文件

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-06-18 23:17:28

将变量从 HTML 传递到使用 addEventListener 的 Javascript 文件

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-06-18 23:17:28

解决方案1
1 已采纳 2022-06-18 23:17:28