0

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.

In this first activity I want that the next button is disabled or something like that until the user downloads the file, so clicks on the download image.

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.

I am not using input fields so I can't use disabled. I am using images inside of an tag as it shows here:

enter image description here

Do you guys know how can I do this?

Diego Fonseca
  • 31
  • 6

2 Answers2

0
<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>
Seyedpouya SadriFard
  • 1
-1

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>
Yavuz
  • 16
  • 4
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 30 '21 at 05:17