I want the "I agree" checkbox to become active after reading (scrolling) the terms of use to the end.
I referred to the following site.
Referenced sites
The "I agree" checkbox is not active and cannot be checked, but "Next" is active, so you can go to the next page without checking the "I agree" checkbox. I can go.
Currently, css is creating a separate file, JavaScript is written directly in HTML, and JavaScript is placed directly above.
Applicable source codeh1 {
margin: 0;
}
.desc {
font-size: 12px;
}
.terms {
width: 100%;
height: 200px;
margin-bottom: 10px;
padding: 0.5em;
overflow-y: scroll;
box-sizing: border-box;
border: 1px solid #ccc;
font-size: 12px;
}
Terms of service
<p>
After confirming the following contents, if you agree, check "I agree" and click "Next".
</p>
<strong>Article 1 General Rules</strong><br>
<!-Omitted->
<p><label><input type = "checkbox" disabled>Agree and continue</label></p>
<button disabled>Next</button>
<script src = "https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
var end = document.getElementById ('end');
var agree = document.getElementById ('agree');
var next = document.getElementById ('next');
agree.addEventListener ('click', function () {
next.disabled =! next.disabled;
});
var observer = new IntersectionObserver (function (changes) {
if (changes [0] .intersectionRatio === 1) {
observer.disconnect ();
agree.disabled = false;
}
});
observer.observe (end);
Because it is written on the reference site that even beginners can easily do it by copying and pasting, we compared whether there is anything different from the sample.
Reference site sample
When JavaScript was placed directly under HTML, the checkbox became active when the text was scrolled down.
Even with, the phenomenon that the "Next" button can be pressed even if the check box is not checked continues.
When I removed Next , I could n’t select "Next" before scrolling. The "Next" button became active as soon as the "Next" checkbox was checked.
I understand that the place where I put the "Next" link is bad, but I didn't know where to put the link.
-
Answer # 1
Related articles
- i want to create multiple javascript "elements where the same event occurs"
- javascript add a class where you click and remove everything else
- click does not work after automatically entering in the search box with javascript
- oracle - i want to create a sql where clause using the date obtained from the subquery
- javascript - even if you create a line bot by linking gas and line, even if you comment on line, it is only read and you can not
- javascript - i want to create a graph and save it with the data reflected correctly
- javascript - can you create a homepage using rails?
- javascript - i want to create a table by dynamically expressing rowspan using vuejs
- javascript - i want to switch between a state where a check box can be selected and a state where it cannot be selected
- javascript - i want to measure event tracking when i click a button
- javascript - i tried to create a calculator app on the web, but it doesn't work
- javascript - if you create an express server with the import statement, you will get an error saying cannot use import statement
- javascript click event handler is not called when iframe element is clicked
- javascript - change text with vuejs v-for, @click
- javascript - i want to automatically create an array with csv
- javascript - when i click on the next month and the previous month on the calendar, the previous calendar display remains
- javascript - i want to display the hamburger menu with the click () event in jquery, but it is not displayed
- i want to create a specification that slides and displays hidden sentences when you click the javascript button
- javascript - click an image to move to the next image jquery (mail order site product details screen)
- javascript - i want to create a searchable option menu by reading json data
- javascript : Link in a separate window html, css, reactjs
- javascript : Does not remove the case from the list to do list
- javascript : How to display part of an image on a website
- javascript : Distance between menu items
- javascript : jQuery how to add remove event after CSS animation?
- javascript : How to properly fix the bottom bar on the page?
- javascript : How to make html move with js setInterval ()
- javascript : How to remove event.target from a specific element?
- javascript : endless automatic scroller on js
- javascript : Alignment. Adding icons to the menu
WhenPart of
is selected, the button becomes active as soon as the check box is checked.
Thank you very much.