How to replace onclick with eventlistener for sidebar navigation-CodePudding

How would I replace onclick with eventlistener in order to make my collapsible sidebar work. Right now the sidebar does not work in one click (when I add the other onsite links to the navigation- and it doesn't work on their pages as well). I have to be clicking more than once in order to get it to work and when pressed, it deletes all of the user input on the page which I do not want.

I was told that using onclick was the source of my problem and to replace as mentioned above. Unfortunately, I am in no possession of knowledge on how to use JavaScript, Jquery, etc. I tried to replace it using outside sources but most of them was to display some text output?

Any advice on how my code should look would be great. (worth mentioning that I'm not able to post all the other html sites in the folder which when included, the sidebar doesn't work properly)

h1 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 250%;
    text-shadow: 1px 2px 3px rgb(0, 0, 0);
    color: #75c3f3;
    padding-top: 0px;
    padding-bottom: 35px;
    text-align:center;
}

#review {
    background-color: #4CAF50;
    border: none;
    border-radius: 10px;
    color: white;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 17px;
}

#review:hover {
    cursor: pointer;
    background-color:#5cbf2a;
}

#reset {
    background-color: #af4c4c;
    border: none;
    border-radius: 10px;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
}

#result {
    width:fit-content;
    min-width: 200px;
    border-radius: 5px;
    text-align: center;
    background-color: rgb(255, 255, 255);
    color: rgba(0, 0, 0, 0.692);
    padding: 3px;
    margin-left: 370px;
    border: 3px;
    min-height: 70px;
    max-width: 975px;
}

table {
    height: 3px;
}

select {
    margin-left: 20px;
    position:absolute;
}

#typeOfCSR {
    margin-left: 48px;
    position: absolute;
}

#nameOfCert {
    margin-left: 54px;
    position: absolute;
}

#FQDN {
    margin-left: 72px;
    position: absolute;
}

#altName {
    margin-left: 193px;
    position: absolute;
}


#CN {
    margin-left: 168px;
    position:absolute;
}

textarea {
    height: 20px;
    width: 50%;
    max-width:50%;
}

body {
    font-size: large;
    background: #74ebd5;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #ACB6E5, #74ebd5);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #ACB6E5, #74ebd5); /* W3C, IE 10 / Edge, Firefox 16 , Chrome 26 , Opera 12 , Safari 7  */
    padding: 20px;
    padding-top: 10px;
    min-width: fit-content;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.container #input {
    position:relative ;
    margin-right: auto;
    resize: horizontal;;
}

.container {
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px;
    padding-top: 1%;
    border-radius: 10px;
    min-width: 720px;
}

.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }
  
  .sidebar a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  
  .sidebar a:hover {
    color: #f1f1f1;
  }
  
  .sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  
  .openbtn {
    font-size: 20px;
    cursor: pointer;
    background-color: #111;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 10px;
  }
  
  .openbtn:hover {
    background-color: #444;
  }
  
  #main {
    transition: margin-left .5s;
    padding: 15px;
  }
  
  pre code {
    background-color: #eee;
    border: 1px solid #999;
    display: block;
    color: #111;
    max-width: fit-content;
    padding: 20px;
  }

/** linear-gradient(135deg, #71b7e6, #9b59b6) **/
/** #008ce4; **/

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="site.css" />

    <title>CMS Cert Creation Form</title>
    <style>
        pre code {
  background-color: #eee;
  border: 1px solid #999;
  display: block;
  padding: 20px;
}
    </style>
</head>

<body> 

    <form action="#"> 

        <div >

            <div id="mySidebar" >
                <a href="javascript:void(0)"  onclick="closeNav()">×</a>
                <a href="CMS-CERT.html">CMS</a>
                <a href="extra.html">Extra</a>
                <a href="extra2.html">Extra2</a>
                <a href="extra3.html">Extra3</a>
              </div>
        
              <div id="main">
                <button  onclick="openNav()">☰ Open Sidebar</button>

        <h1>CMS Cert Creation Form</h1>
   
<div id="input">
        <div>
            <label for="typeOfCSR">Choose the type of CSR you want to request</label>
            <select name="typeOfCSR" id="typeOfCSR" onkeyup="allowAlphaNumericSpace(this)">
                <option value="">Select an Option </option>
                <option value="One">One</option>
                <option value="Two">Two</option>
                <option value="Three">Three</option>
            </select>
        </div>
<br />
<br />
        <div>
            <label for="nameOfCert"> Enter the name you want to give to the Cert</label>
            <textarea cols="100" rows="1" id="nameOfCert" onkeyup="allowAlphaNumericSpace(this)"></textarea>
        </div>
<br />
<br />
        <div>
            <label for="FQDN"> Enter the FQDN of all your CMS servers</label>
            <textarea cols="100" rows="1" id="FQDN" onkeyup="allowAlphaNumericSpace(this)"></textarea>
        </div>
<br />
<br />
        <div>
            <label for="alternateName"> Enter the alternate name</label>
            <textarea cols="100" rows="1" id="altName" onkeyup="allowAlphaNumericSpace(this)"></textarea>
        </div>
 <br />
 <br />
        <div>
            <label for="CN"> Enter the CN of your server</label>
            <textarea cols="100" rows="1" id="CN" onkeyup="allowAlphaNumericSpace(this)"></textarea>
        </div>
<br />
<br />

<table id="result">
      <tr height="50px">
        <td>Result will show here</td>
      </tr>
</table>

</div>

<br />
<br />


        <button type="button" id="review">Generate String</button>
        <br /> <br />
        <input type="reset" value="Reset Input" id="reset">
<br/>
<br/>
    <br />
</form>
      </div>
</div>

    <script>
        const btn = document.getElementById('review');
        btn.addEventListener('click',()=>{
            let typeOfCSR = document.getElementById('typeOfCSR').value;
            let CN = document.getElementById('CN').value;
            let FQDN = document.getElementById('FQDN').value;
            let altName = document.getElementById('altName').value;
            let nameOfCert = document.getElementById('nameOfCert').value;

            document.getElementById('result').textContent =  typeOfCSR  " "  nameOfCert  " "  FQDN  " "  altName  " "  CN;
        })

        function allowAlphaNumericSpace(thisInput) {
  thisInput.value = thisInput.value.split(/[^a-zA-Z0-9 ]/).join('');
}

function openNav() {
  document.getElementById("mySidebar").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}

    </script>
</body>

</html>

CodePudding user response：

Your button to open the side navigation didn't have type="button" which was causing the form to post when clicking it, I added type="button" to your HTML markup
Used document.querySelector to get your button and anchor with the appropriate className and added the click events via addEventListener
Removed the inline click events on the anchor and button

Please see snippet below:

h1 {
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-size: 250%;
        text-shadow: 1px 2px 3px rgb(0, 0, 0);
        color: #75c3f3;
        padding-top: 0px;
        padding-bottom: 35px;
        text-align:center;
    }

    #review {
        background-color: #4CAF50;
        border: none;
        border-radius: 10px;
        color: white;
        padding: 10px 15px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 17px;
    }

    #review:hover {
        cursor: pointer;
        background-color:#5cbf2a;
    }

    #reset {
        background-color: #af4c4c;
        border: none;
        border-radius: 10px;
        color: white;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
    }

    #result {
        width:fit-content;
        min-width: 200px;
        border-radius: 5px;
        text-align: center;
        background-color: rgb(255, 255, 255);
        color: rgba(0, 0, 0, 0.692);
        padding: 3px;
        margin-left: 370px;
        border: 3px;
        min-height: 70px;
        max-width: 975px;
    }

    table {
        height: 3px;
    }

    select {
        margin-left: 20px;
        position:absolute;
    }

    #typeOfCSR {
        margin-left: 48px;
        position: absolute;
    }

    #nameOfCert {
        margin-left: 54px;
        position: absolute;
    }

    #FQDN {
        margin-left: 72px;
        position: absolute;
    }

    #altName {
        margin-left: 193px;
        position: absolute;
    }


    #CN {
        margin-left: 168px;
        position:absolute;
    }

    textarea {
        height: 20px;
        width: 50%;
        max-width:50%;
    }

    body {
        font-size: large;
        background: #74ebd5;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #ACB6E5, #74ebd5);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #ACB6E5, #74ebd5); /* W3C, IE 10 / Edge, Firefox 16 , Chrome 26 , Opera 12 , Safari 7  */
        padding: 20px;
        padding-top: 10px;
        min-width: fit-content;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    .container #input {
        position:relative ;
        margin-right: auto;
        resize: horizontal;;
    }

    .container {
        color: white;
        background-color: rgba(0, 0, 0, 0.7);
        padding: 20px;
        padding-top: 1%;
        border-radius: 10px;
        min-width: 720px;
    }

    .sidebar {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #111;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
      }
      
      .sidebar a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
      }
      
      .sidebar a:hover {
        color: #f1f1f1;
      }
      
      .sidebar .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
      }
      
      .openbtn {
        font-size: 20px;
        cursor: pointer;
        background-color: #111;
        color: white;
        padding: 10px 15px;
        border: none;
        border-radius: 10px;
      }
      
      .openbtn:hover {
        background-color: #444;
      }
      
      #main {
        transition: margin-left .5s;
        padding: 15px;
      }
      
      pre code {
        background-color: #eee;
        border: 1px solid #999;
        display: block;
        color: #111;
        max-width: fit-content;
        padding: 20px;
      }

    /** linear-gradient(135deg, #71b7e6, #9b59b6) **/
    /** #008ce4; **/

<!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="site.css" />

        <title>CMS Cert Creation Form</title>
        <style>
            pre code {
      background-color: #eee;
      border: 1px solid #999;
      display: block;
      padding: 20px;
    }
        </style>
    </head>

    <body> 

        <form action="#"> 

            <div >

                <div id="mySidebar" >
                    <a >×</a>
                    <a href="CMS-CERT.html">CMS</a>
                    <a href="extra.html">Extra</a>
                    <a href="extra2.html">Extra2</a>
                    <a href="extra3.html">Extra3</a>
                  </div>
            
                  <div id="main">
                    <button type="button" >☰ Open Sidebar</button>

            <h1>CMS Cert Creation Form</h1>
       
    <div id="input">
            <div>
                <label for="typeOfCSR">Choose the type of CSR you want to request</label>
                <select name="typeOfCSR" id="typeOfCSR" onkeyup="allowAlphaNumericSpace(this)">
                    <option value="">Select an Option </option>
                    <option value="One">One</option>
                    <option value="Two">Two</option>
                    <option value="Three">Three</option>
                </select>
            </div>
    <br />
    <br />
            <div>
                <label for="nameOfCert"> Enter the name you want to give to the Cert</label>
                <textarea cols="100" rows="1" id="nameOfCert" onkeyup="allowAlphaNumericSpace(this)"></textarea>
            </div>
    <br />
    <br />
            <div>
                <label for="FQDN"> Enter the FQDN of all your CMS servers</label>
                <textarea cols="100" rows="1" id="FQDN" onkeyup="allowAlphaNumericSpace(this)"></textarea>
            </div>
    <br />
    <br />
            <div>
                <label for="alternateName"> Enter the alternate name</label>
                <textarea cols="100" rows="1" id="altName" onkeyup="allowAlphaNumericSpace(this)"></textarea>
            </div>
     <br />
     <br />
            <div>
                <label for="CN"> Enter the CN of your server</label>
                <textarea cols="100" rows="1" id="CN" onkeyup="allowAlphaNumericSpace(this)"></textarea>
            </div>
    <br />
    <br />

    <table id="result">
          <tr height="50px">
            <td>Result will show here</td>
          </tr>
    </table>

    </div>

    <br />
    <br />


            <button type="button" id="review">Generate String</button>
            <br /> <br />
            <input type="reset" value="Reset Input" id="reset">
    <br/>
    <br/>
        <br />
    </form>
          </div>
    </div>

        <script>
            const btn = document.getElementById('review');
            btn.addEventListener('click',()=>{
                let typeOfCSR = document.getElementById('typeOfCSR').value;
                let CN = document.getElementById('CN').value;
                let FQDN = document.getElementById('FQDN').value;
                let altName = document.getElementById('altName').value;
                let nameOfCert = document.getElementById('nameOfCert').value;

                document.getElementById('result').textContent =  typeOfCSR  " "  nameOfCert  " "  FQDN  " "  altName  " "  CN;
            });
            //****adding click events via addEventListener****
            const navopen = document.querySelector('button.openbtn');
            const navclose = document.querySelector('a.closebtn');
            navopen.addEventListener('click', openNav);
            navclose.addEventListener('click', closeNav);
            //****End new block****

            function allowAlphaNumericSpace(thisInput) {
      thisInput.value = thisInput.value.split(/[^a-zA-Z0-9 ]/).join('');
    }

    function openNav() {
      document.getElementById("mySidebar").style.width = "250px";
      document.getElementById("main").style.marginLeft = "250px";
    }

    function closeNav() {
      document.getElementById("mySidebar").style.width = "0";
      document.getElementById("main").style.marginLeft= "0";
    }

        </script>
    </body>

    </html>