如何根据单击的按钮更改范围文本?

Question

我想在用户点击它们后更改html页面上显示的数量。有 2 个按钮，单击每个按钮后，它应该将它们定向到一个新的 html，并且数量应该相应地变化。我知道这不是真正的方法，但我不确定我还能怎么做。目前，我只能附加所有金额。

<button onclick="myFunction1()" type="submit" id="one">BUY</button>
<button onclick="myFunction2()" type="submit" id="two">BUY</button>

function myFunction1() {
window.location='pay.html';
};
function myFunction2() {
window.location = 'pay.html';
};

<span class="title" id="total"></span>
<span class="title" id="total2"></span>

(function () {
"use strict";
$().ready(function () {
})
myFunction1()
function myFunction1() {
var totalamt = '$100';
$('#total').html("<span style='float:right'>" + "Total:" + 
totalamt + "</span>");
}
})();
(function () {
"use strict";
$().ready(function () {
})
myFunction2()
function myFunction2() {
var totalamt2 = '$300';
$('#total2').html("<span>" + "Total:" + totalamt2 + 
"</span>");
}
})();

想要达到的结果：例如，通过单击第一个按钮，将用户重定向到pay.html并显示$100。通过单击第二个按钮，重定向到相同的html(pay.html(，显示$ 300。请帮忙，非常感谢。

Answer 1

您可以为 span 指定 id，然后将文本设置为 300 或 100

<span id="price">$100</span>
<scrit>
document.getElementById("price").innerHTML = "$300";  
</script>

Answer 2

使用 params 向pay.html发送GET请求：

window.location='pay.html?amount=100';

通过 JS 访问参数：

var url= new URL(document.location).searchParams;
var amount=url.get("amount");
var totalamt = '$'+ amount;
$('#total').html("<span style='float:right'>" + "Total:" + totalamt + "</span>");

你的HTML.html：

<button onclick="myFunction1()" type="submit" id="one">BUY</button>
<button onclick="myFunction2()" type="submit" id="two">BUY</button>

function myFunction1() {
window.location='pay.html?amount=100';
};
function myFunction2() {
window.location = 'pay.html?amount=300';
};

支付.html：

<span class="title" id="total"></span>

var url = new URL(document.location).searchParams;//Getting search params
var amount = url.get("amount"); //Getting value of amount from parameters
var totalamt = '$'+ amount;
$('#total').html("<span style='float:right'>" + "Total:" + totalamt + "</span>");

这也可以在没有真实应用程序的情况下工作。