让 Paypal 捐款改变 CSS答案

【问题标题】：Let a Paypal donation change CSS让 Paypal 捐款改变 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？

标签： javascript html css paypal

【解决方案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 中创建一个感谢页面（我该怎么做）？