Как я могу изменить диапазон текста в зависимости от нажатой кнопки?

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

Отправить GET запрос на pay.html с параметрами:

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>");

yourhtml.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';
};

pay.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>");

Это также будет работать без приложения Real.

Answer 2

вы можете указать id для span, а затем установить текст в 300 или 100

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