How to lock content until user does a task?-CodePudding

I am currently developing a “course” platform, and I want to prevent the user from advancing to the next topic until they click the last item on the current topic.

I am thinking of doing an arrow, that is darkened and unclickable (by removing the tag or something like that) and when the user clicks on the last item, it recovers its color and the user can advance to the next topic.

I assume it will be with JavaScript by changing the value on the HTML item with a getElementByID or with an eventListener, but I am not clear on how to proceed.

Do you guys know how can I do this?

CodePudding user response：

<body>
<input type="button" id="button1" value="Task 1" 
onclick="unlockButton()" />
<input type="button" id="button2" value="Task 2" disabled />
<script>
    function unlockButton() {
        document.getElementById("button2").disabled = false;
    }
</script>

CodePudding user response：

Yes, you can do this in multiple ways using javaScript. Here are some examples:
Disable/Non-Clickable an HTML button in Javascript

Simplest way I can think of:

<html>
<head>
    <script>
        function unlockButton() {
            document.getElementById("button2").disabled = false;
        }
    </script>
</head>

<body>
    <input type="button" id="button1" value="Task 1" onclick="unlockButton()" />
    <input type="button" id="button2" value="Task 2" disabled />
</body>

</html>