how to show a div using js when confirm is confirmed-CodePudding

i can find things for showing a js confirm when <a onclick/onchange> is clicked, but i dont want that. what i want it to do is just show a div. I do not want it to show js text or anything js besides the confirm popup.

what i want to happen is when you click the checkbox a confirm message appears. When you push Close it should not let you use the <a href="#"> then, if you select Ok it will show the div (the <a href="#">)

my use for this is to confirm that you agree to our privacy policy and our terms of use. We need this secondary confirmation because if they carelessly check the checkbox and push Continue, their IP address, email, and files will be unknowingly shared between me and my dev's to make sure that only our classmates are on the website.

if this cannot be done then just make it so that the link/button does not appear until checkbox is checked, and we will add js alert reminders that we can do anything we state in privacy policy, and any miss-use of our site and code will result in what's stated in terms of use. thanks =D

the following is my relevant piece of html( the button/link alongith the html that came with thee js i tried using)

<div id="mainDiv">
    <input type="text"  name="name" placeholder="Your name here!" id="name"/>
        <input type="button" onclick="clicked();" value="I'm ready!"/>
</div>
<br>
    <div id="nameDiv"></div>
<a id="a" id="submit_button" href="/main/main.html#foo">CONTINUE</a>

now, this is the js i tried to change and use, but in the end changed it back to how it was

//checkbox js function
function clicked() {
    var name = document.getElementById('name').value;
    if(confirm('Hello '   name   ', great to see you!'))
    {
        document.getElementById('nameDiv').innerHTML = 'Hello '   name   ', great to see you!';
        document.getElementById('mainDiv').style.display = "none";
    }
    
}

please help me lol, im trying to get my website done before school starts again.

i have tried searching with every keyword i know on alot of search engines and sites including SO, Glitch, Codeproject.

CodePudding user response：

Hopefully this solves your question. Code could use more fine tuning but it should work how it's intended.

<html>
<head>
    <title>Test</title>
    <style>
        #submit_button {
            display: none;
        }
    </style>
    <script>
function clicked() {
    var name = document.getElementById('name').value;
    if(confirm('Hello '   name   ', great to see you!'))
    {
        document.getElementById('nameDiv').innerHTML = 'Hello '   name   ', great to see you!';
        document.getElementById('mainDiv').style.display = "none";
        document.getElementById('submit_button').style.display = "block";

    }
    
}

</script>
</head>
<body>
    <div id="mainDiv">
        <input type="text"  name="name" placeholder="Your name here!" id="name"/>
            <input type="button" onclick="clicked();" value="I'm ready!"/>
    </div>
    <br>
        <div id="nameDiv"></div>
    <a id="submit_button" href="/main/main.html#foo">CONTINUE</a>    
</body>
</html>