如何用侧边栏导航的事件监听器替换 onclick

Question

如何将 onclick 替换为 eventlistener 以使我的可折叠侧边栏正常工作。现在侧边栏不能一键工作（当我将其他现场链接添加到导航中时 - 它也不能在他们的页面上工作）。我必须多次点击才能使其正常工作，当按下时，它会删除页面上我不想要的所有用户输入。

我被告知使用 onclick 是我的问题的根源，并按照上面提到的进行替换。不幸的是，我不知道如何使用 JavaScript、Jquery 等。我尝试使用外部资源替换它，但大多数是显示一些文本输出？

任何关于我的代码外观的建议都会很棒。（值得一提的是，我无法 post 文件夹中的所有其他 html 站点，当包含这些站点时，边栏无法正常工作）

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 class="container">

            <div id="mySidebar" class="sidebar">
                <a href="javascript:void(0)" class="closebtn" 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 class="openbtn" 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>

Answer 1

你打开侧边导航的按钮没有 type="button" 这导致表单在点击它时 post，我在你的中添加了 type="button" HTML 标记
使用 document.querySelector 获取具有适当类名的按钮和锚点，并通过 addEventListener
添加点击事件
删除了锚点和按钮上的内联点击事件

请看下面的片段：

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 class="container">

                <div id="mySidebar" class="sidebar">
                    <a class="closebtn">×</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" class="openbtn">☰ 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>

如何用侧边栏导航的事件监听器替换 onclick

How to replace onclick with eventlistener for sidebar navigation

html

javascript

onclick

addeventlistener