使用带有按钮的JS函数来显示变量

Using JS function with button to display variable

本文关键字：函数 显示 变量 JS 按钮      更新时间：2023-09-26

我之前问过一个类似的问题，但后来意识到我需要为此使用 javascript。这是我的情况：

我有一个购物网站，里面有产品x和一个"购买"按钮。 "购买"按钮链接到结帐页面，以及一个javascript函数，该函数具有2个全局变量，称为"产品"和"价格"。 我想在结帐页面上显示这两个变量，这些变量将根据用户按下的产品"购买"按钮自动更新。

var x = "iPhone";
var xprice = 199.99;
var product;
var price;
function productX(){
    product = x;
    price = xprice;
}

^^^^ 不起作用。 它将简单地在写入变量的区域中中继"未定义"。如果有人能理解我想做什么，他们可以帮助我吗？

我只是希望确认页面显示该人将要购买的产品，以及取决于用户按下的购买按钮的价格。我似乎无法使用JavaScript让它工作。 我不想使用PHP，数据库或cookie。

谢谢

好吧，鉴于您尝试在没有PHP或cookie的情况下将数据从一个页面传递到另一个页面，这将是困难的。

假设您有一个带有"购买按钮"的表单以转到下一页，您可以设置表单的 action="GET"，并在表单中有 2 个隐藏字段：

<input id="productInput" type="hidden" name="prpduct" value="" '>
<input id="priceInput" type="hidden" name="price" value="" '>

然后，我们需要将您的函数更改为：

function productX(){
document.getElementById("productInput").value = x;
document.getElementById("priceInput").value = xprice;
}

然后，这将允许javascript通过GET将值传递到下一页。

诚然，javascript不是为它而设计的。 因此，要在下一页上显示这些值，您必须使用如下函数：

function GetFromUrl(url, key) {
var pairs = url.substring(url.indexOf('?') + 1).split('&');
for (var i = 0; i < pairs.length; i++) {
  var pair = pairs[i].split('=');
  if(key == pair[0])
     return pair[1];
}
return null;
}

（感谢卡萨布兰卡在这里从URL制作一个JavaScript数组，我修改了他的函数）

然后，在身体的负载中，使用以下命令调用此函数：

product = GetFromUrl(window.location, "productInput");
price = GetFromUrl(window.location, "priceInput");

从这里开始，你必须做一些document.getElementById（）的东西来修改实际的页面。

对不起，如果我不是很描述...

如果要

将值传递到第二页，则需要将它们附加到第二页链接的URL。

假设您的第二页称为结帐。您可能会链接到结帐页面，大概如下：

<a href="checkout">Checkout</a>

现在，您无法使用表单提交来执行此操作...阅读此处了解更多信息：提交带有查询字符串参数和隐藏参数的 GET 表单消失

您将需要自己构造查询字符串。（这是 URL 的?something=10&somethingelse=20 ）部分。

您需要做的是通过事件侦听器将 JavaScript 函数附加到按钮的单击上。您还需要为您的链接提供一个 ID。此函数有两个参数，分别是项目的价格和名称。

<a id="checkout" href="checkout">Checkout</a>
function checkout(price, name)
{
  document.getElementById('checkout').href += "?price="+price+"&name="+name;
}

第二个页面已加载，您需要通过将字符串值拆分为数组来从 URL 中检索这些值。

看这里：如何从 GET 参数中获取值？

相关文章：