让 Paypal 捐款改变 CSS
Posted
技术标签:
【中文标题】让 Paypal 捐款改变 CSS【英文标题】：Let a Paypal donation change CSS 【发布时间】：2019-02-17 09:39:16 【问题描述】：我是编码初学者，但我在互联网上找不到答案。
我有一个带有 Paypal 捐赠按钮的浏览器游戏。有人捐款后，他会转到感谢页面。
我想给那些在游戏中捐赠了一个小金冠（一个svg）的人，当我按下“返回主页并获得一个王冠”按钮时，我试图做到这一点，谢谢-页面：
document.getElementById('crown').style.display = "inherit";
（根据 css 显示为“无”）
但问题是：它不起作用（一定是因为我有 2 个不同的 .html 文件和 2 个不同的 .js 文件，因为当我为这两个 .html 文件使用一个 .js 文件时，它会给出很多不工作的东西的错误）。
主要是：我想在视觉上回馈捐赠者。有没有简单的解决方案来做到这一点？
index.html 皇冠所在的位置：
<svg id="crown">
Some svg coordinates that form a crown
</svg>
style.css 不可见的地方：
#crown
display: none;
index.html 中的按钮有一个 Paypal 链接，您可以在其中捐款。捐赠后，您将登陆thankyou.html，并带有此按钮：
<button id="getCrown" type="button"
onclick="window.location.href='/index.html'; getCrown();">Give me that crown!</button>
这应该让thankyou.js 中的javascript 使皇冠可见：
document.getElementById('crown').style.display = "inherit";
但事实并非如此。它给出了一个错误：
Uncaught TypeError: Cannot read property 'style' of null
at getCrown (thankyou.js:5)
at HTMLButtonElement.onclick (thankyou.html:32)
【问题讨论】：
嘿克里斯！如果我们能看到您迄今为止所做的尝试或更好的活动，如果您可以尝试在 jsfiddle.net 上重新创建您的问题并与我们分享链接，我们会更容易为您提供帮助 这真的取决于你如何处理代码（这就是为什么@AwadMaharoof 要求它 - 如果你需要帮助真的很重要......） - 虽然我猜你会有某种“用户资料”代码 - 为什么不在其中添加一个“hasCrown”元素并在捐赠命中时将其打开？另一个想法（取决于代码...）是在 Paypal 返回中通过 css 将其打开.....好吧，正如您所看到的，我们可以猜一整天 - 所以显示一些代码位，您将获得详细的帮助! 这可能是您希望从服务器端发送的内容，以便对捐赠进行验证，以及如果您希望其他用户看到上述皇冠。 也许是一个会议的案例？无论是服务器端还是像 sessionStorage 这样的东西，或者在这种情况下可能是更好的 localStorage。但是用户仍然可以删除存储，因此如果您甚至有用户登录系统，服务端会话会更好，因为如果没有，您必须使用客户端存储。 我没有用户登录系统@TheFool，但你将如何使用 localStorage？ 【参考方案1】：所以你给你的按钮一个onclick="set_crown()" 属性。
这会调用 set_crown() javascript 函数：
function set_crown()
localStorage.setItem('crown', 'visible');
;
然后你检查你的 index html，如果他得到了这个 key 和 javascript 这样的正确值：
if (localStorage.getItem('crown') === 'visible')
document.getElementById('crown').style.display = 'inherit';
;
请注意，您可以对 sessionStorage 执行相同的操作。不同之处在于 localStorage 数据将一直保留在那里，直到用户清除其浏览器或您使用 javascript 将其删除，而 sessionStorage 将在会话结束时自行清除，即浏览器关闭。
这里又是一些值得阅读的东西；）localStorage info
这里有两个小示例页面：
index.html：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body onload="check_crown()">
<div id="crown" style="display:none">
<p>I am a Crown :)</p>
</div>
<button id="donate" type="button"
onclick="window.location.href='thankyou.html';">
Donate
</button>
<script type="text/javascript">
function check_crown()
if (localStorage.getItem('crown') === 'visible')
document.getElementById('crown').style.display = 'inherit';
;
;
</script>
</body>
</html>
thankyou.html：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<button id="getCrown" type="button"
onclick="window.location.href='index.html'; set_crown();">
Give me that crown!
</button>
<script type="text/javascript">
function set_crown()
localStorage.setItem('crown', 'visible');
;
</script>
</body>
</html>
只需使用您喜欢的浏览器运行索引，希望对您有所帮助:)
【讨论】：
非常感谢！我会试试看。【参考方案2】：您似乎有两个不同的文档对象，即thankyou.html 和index.html。因此，作为事件处理的一部分（在thankyou 文档的上下文中），您正在尝试更改另一个文档（index.html）的状态。这不是你想做的事情。 我试图从您的示例中创建一个小提琴，并且它适用于单个文档模型。 https://jsfiddle.net/8y4jdapt/20/ 看看有没有帮助。
否则，为什么不将URL参数传递给index.html，如window.location.href='/index.html?showCrown=true，并在index.html的上下文中使用该参数somwhere来决定是否渲染皇冠。
【讨论】：
为什么你的小提琴中的按钮在被点击时会改变位置？我没有看到那个代码。 因为当您点击按钮display 时，样式会动态添加到之前不可见的皇冠元素中。
我还是不明白。正如您可能已经假设的那样，我是编码的初学者。我也没有得到您对 URL 参数的解决方案。你的意思是我不能有一个感谢页面？还是我必须在 index.html 中创建一个感谢页面（我该怎么做）？以上是关于让 Paypal 捐款改变 CSS的主要内容，如果未能解决你的问题，请参考以下文章