Question

我有一大块网站，我需要允许用户输入代码并显示价格变化。代码是任意的，因为实际价格是代码将导致显示的价格 - 我只是希望用户感觉他们是特殊的＆＃39;。

<h1 style="text-align: center;">Your choice for a one-time investment of just:</br> 
<a title="JUST $797" href="http://samplesite.com" target="_blank">$797</a></h1>
<p style="text-align: center;"><strong>If you'd prefer a totally custom design, <a title="Custom Mobile Site Design" href="http://samplesite.com" target="_blank">click here</a>.</strong></p>
<center><input type="text" id="EnterCode" /><div id="price" value="Code">Enter Code</div></center>

（＆＃34;标题=＆＃34;行中的链接就在那里因为我使用的主题让我改变了字体颜色，所以要让它使用我想要的颜色，我必须让它认为它是一个链接......我将不得不进入css并在以后更改它。

因此，鉴于上述代码，显示的当前价格为797美元。当用户输入任何代码并按下回车时，我希望$ 797更改为$ 397。

我无法在网上找到任何可以指向正确方向的东西，所以我来到这里，问你们。我非常感谢您提供的任何帮助。

谢谢！

Answer 1

首先，您需要在包含代码的<a>标记中添加ID。像这样：

<a id="yourPriceId" title="JUST $797" href="http://samplesite.com" target="_blank">$797</a>

然后，您可以使用事件监听器轻松使用Javascript来执行您想要的操作，该事件监听器检查用户是否按下了Enter键，如下所示：

var input = document.getElementById("EnterCode"),
    price = document.getElementById("yourPriceId");

input.addEventListener('keyup', function(e) {
    if (e.keyCode === 13 && !!this.value) {
        price.textContent = "$397";
    }
});

注意：仅当用户在按Enter键之前在输入中输入内容时，此功能才有效。如果您想要改变价格，即使用户没有输入任何内容，也只需从&& !!this.value声明中删除if。

输入代码，在用户按Enter键时更改显示的价格

1 个答案: