How do I store if a user clicked a button on a cookie using JavaScript?

Question

I'm trying to make a simple website for a friend. The purpose is picking a ticket and showing an alert and disabling the button showing that the ticket has been already redeemed. I also want to store that on a cookie, because if my friend leaves the webpage, the values are restored to default and not based on the choices my friend have made.

The HTML code is this:

<img id="first_ticket" src="ticket_not_edited.png" width="50%">
<br>
<button id="first_button" class="ticket1" onclick="first()">Redeem</button>

The JavaScript code is:

 function first() {
  alert("You've redeemed successfuly the first ticket.");
  document.getElementById("first_button").style.background='#FF0000';
  document.getElementById("first_button").disabled = true;
  document.getElementById('first_button').src='broken_ticket.png';
  document.getElementById('first_button').innerHTML = "REDEEMED";
}

The purpose is to store the user's choice on a cookie so I can always check what my friend has chosen to disable the ticket and the button availability.

Also, how can I make it to check if my friend chose a ticket to disable some options (by "some options" I'm referring to disabling the button and changing the image to a broken ticket"?

Thanks in advance!

if your friend is always going to use the same computer and browser, you could use `localStorage` instead of cookies (https://www.w3schools.com/jsref/prop_win_localstorage.asp) — blurfus, Dec 23 '20 at 17:22
just asking, what if he uses a different computer, and he might not want to keep entering the form. — Green, Dec 23 '20 at 17:25
I'd heep a phisical list on a paper on what he had redeemed to prevent him from cheating. — r0dr1, Dec 23 '20 at 18:12

Green · Accepted Answer · 2020-12-24T16:14:40.977

1

You can use document. cookie to store the answer, and you can check in the link below to know if it exists.

Got it from here:

final:

<img id="first_ticket" src="" width="50%">
<br>
<button id="first_button" class="ticket1" onclick="checkIfExists()">Canjear</button>

<script>
    // check if it Exists
    function getCookie(name) {
        var dc = document.cookie;
        var prefix = name + "=";
        var begin = dc.indexOf("; " + prefix);
        if (begin == -1) {
            begin = dc.indexOf(prefix);
            if (begin != 0) return null;
        }
        else {
            begin += 2;
            var end = document.cookie.indexOf(";", begin);
            if (end == -1) {
                end = dc.length;
            }
        }
        return decodeURI(dc.substring(begin + prefix.length, end));
    }

    var myCookie = getCookie("first");

    if (myCookie == null) {
        alert('Welcome! Please Choose A ticket below.');
    }
    else {
        alert('Welcome back! You already choose a ticket!');
        document.getElementById("first_button").style.background = '#FF0000';
        document.getElementById("first_button").disabled = true;
        document.getElementById('first_button').src = 'broken_ticket.png';
        document.getElementById('first_button').innerHTML = "REDEEMED";
    }

    function checkIfExists() {
        if (myCookie == null) {
            document.cookie = "first = 'yes'";
            alert("You've redeemed successfuly the first ticket.");
            document.getElementById("first_button").style.background = '#FF0000';
            document.getElementById("first_button").disabled = true;
            document.getElementById('first_button').src = 'broken_ticket.png';
            document.getElementById('first_button').innerHTML = "REDEEMED";
        }
        else {
            alert('Oh. You already choose a ticket.');
        }
    }

</script>

edited Dec 24 '20 at 16:14

answered Dec 23 '20 at 17:32

Green

486
2
11
31

I don't know why but that isn't working for me... I'm using ATOM's core, and I can't manage it to show the alert, either some advice of what's going wrong... – r0dr1 Dec 23 '20 at 18:04
1

Edit: The "true" attribute is the error. I'm trying to figure out how to solve it, but I'm not an expert on JavaScript ): – r0dr1 Dec 23 '20 at 18:15
Now I have 2 errors :( It says that "checkTicket is not defined at checkIfExists and at HTMLButtonElement.onclick". I suppose this last one has something in common with the button and it's function? – r0dr1 Dec 23 '20 at 19:58
I'm sorry to say no :( it's not working either. It throws the same error. I uploaded a screenshot to imgur for you too see the error. Maybe I'm missing something too... https://imgur.com/a/dyrtBY8 – r0dr1 Dec 23 '20 at 20:05
Hey! Sorry for answering 15 hours later... I tried it and now the JavaScript's console don't throw any errors. Instead, the code works but the cookie isn't saved. If I click the button to "redeem" and reload the page, the button is available again :( – r0dr1 Dec 24 '20 at 11:55
Hi. I tested it again and what I can see working is the alerts (which tells me to choose a ticket) and the redeemed and red button, but if I reload the page, it tells me again to choose, without changing the ticket to a broken one and the "redeem" text to a "redeemed". Tried with Google Chrome and Microsoft Edge. – r0dr1 Dec 24 '20 at 17:12
OMG! It worked! Ok, so I've tested it waking up an Apache server, and apparently it's working. Thank you so much. But I got one more question. What if there are 21 tickets and I want to store if each ticket has been redeemed? How can I store those values into separate cookies? Thanks in advance! – r0dr1 Dec 25 '20 at 14:17
YESS!! It worked! Thanks man! I created like 20 more var's to obain each cookie and it works. Now, if I close or reload the page, it stays redeemed! Thank you a lot (: Also, I hosted the HTML on Github, and if I close the browser entirely, it loads the page again with all the tickets un-redeemed. The point is that my friend (who enters the page on the iPhone), doesn't care much about cookies and informatic stuff, and he never closes the webpage, he closes the web browser but not the page, and it stays. Once again, thank you a lot for helping me through this journey!!! – r0dr1 Dec 25 '20 at 15:21

How do I store if a user clicked a button on a cookie using JavaScript?

1 Answers1