Пусть пожертвование Paypal изменит CSS - PullRequest
Новая
       0

Пусть пожертвование Paypal изменит CSS

0 голосов
/ 12 сентября 2018

Я новичок в кодировании, но не смог найти ответ в интернете.

У меня есть браузерная игра с кнопкой пожертвования от Paypal.После того, как кто-то сделал пожертвование, он идет на страницу благодарности.

Я хочу дать людям, которые пожертвовали небольшую золотую корону (svg) в игре, и я попытался сделать это с этимпри нажатии кнопки «вернуться на домашнюю страницу и получить корону» на странице спасибо: 

document.getElementById('crown').style.display = "inherit";

(отображение по css было «none»)

Но вещьявляется: это не работает (это должно быть потому, что у меня есть 2 разных файла .html с 2 разными файлами .js, потому что, когда я использую один файл .js для обоих файлов .html, это дает много ошибок вещей, которые не являютсяработает).

Главное: я хочу визуально дать что-то людям, которые пожертвовали.Есть ли простое решение сделать это?

index.html, где корона: 

<svg id="crown">
  Some svg coordinates that form a crown
</svg>

style.css, где она невидима: 

#crown {
  display: none;
}

AКнопка в index.html имеет ссылку Paypal, где вы можете пожертвовать.Когда вы пожертвовали, вы попадаете на thankyou.html с этой кнопкой: 

<button id="getCrown" type="button" 
onclick="window.location.href='/index.html'; getCrown();">Give me that crown!</button>

Это должно позволить Javascript в thankyou.js сделать корону видимой с этим: 

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)

Ответы [ 2 ]

0 голосов
/ 13 сентября 2018

Итак, вы даете своей кнопке атрибут onclick="set_crown()". Это вызывает функцию javascript set_crown (): 

function set_crown(){
localStorage.setItem('crown', 'visible');
};

затем вы проверяете индекс HTML, если он получил этот ключ с правильным значением с помощью 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>

Просто запустите индекс с вашим любимым браузером, надеюсь, это поможет:)

0 голосов
/ 12 сентября 2018

Похоже, у вас есть два разных объекта документа, т.е. thankyou.html & index.html. Таким образом, как часть вашей обработки событий (в контексте благодарного документа) вы пытаетесь изменить состояние другого документа (index.html). Это не то, что вы хотите сделать. Я попытался создать скрипку из вашего примера, и она отлично работает с одной моделью документа. https://jsfiddle.net/8y4jdapt/20/ Посмотрите, поможет ли это.

В противном случае, почему бы вам не передать параметр URL в index.html, например window.location.href='/index.html?showCrown=true И использовать этот параметр где-то в контексте index.html, чтобы решить, следует ли отображать корону или нет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...