How do I store a cookie recording if a user clicked a button, 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!

Answer 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>