小贝子编程

如何用eventlistener代替onclick作为侧边栏导航



我如何用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>

  1. 你打开侧边导航的按钮没有type="button"，这导致表单在点击它时发布，我将type="button"添加到你的HTML标记

  2. 使用document.querySelector获得您的按钮和锚与适当的className，并通过addEventListener添加点击事件

  3. 删除锚点和按钮上的内联点击事件

请参见下面的代码片段:

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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium