当前位置： 文江博客话题详情

如何用EventListener替换侧栏导航

发布于 2025-01-26 02:48:00 字数 8147 浏览 4 评论 0原文

我如何用EventListener替换OnClick，以使我的可折叠侧边栏工作。目前，侧栏一单击起作用（当我将其他现场链接添加到导航时，并且它也无法在其页面上使用）。我必须多次单击一次才能使其正常工作，并且按下时，它会删除我不需要的页面上的所有用户输入。

有人告诉我，使用OnClick是我问题的根源，并如上所述替换。不幸的是，我没有关于如何使用JavaScript，jQuery等的知识。我试图使用外部来源替换它，但其中大多数是显示一些文本输出？

关于我的代码外观的任何建议都会很棒。 （值得一提的是，我无法在文件夹中发布所有其他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>

原文

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 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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

衣神在巴黎 2025-02-02 02:48:00

  1. 您打开侧面导航的按钮没有type =“ button”，它在单击它时会发表表格，我添加了type =“ button”到您的HTML标记

  2. 使用的document.queryselector获取您的按钮并使用适当的className锚定，并通过addeventListener

    添加单击事件

  3. 删除了单击的单击事件。 P>

请参阅下面的摘要：

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>

  1. 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

  2. Used document.querySelector to get your button and anchor with the appropriate className and added the click events via addEventListener

  3. 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 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>

回复 原文
~没有更多了~

关于作者

流云如水

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文