javascript - 这些 javascript 函数以什么顺序运行?
问题描述
我有一个将 1 添加到变量的按钮,但我想在用户单击它以阻止他们添加多个按钮后隐藏该按钮。该按钮要么不隐藏,要么不添加。请帮忙。我已经尝试了一些东西,但没有任何效果,这是同一个问题,一个或另一个工作,但从来没有。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"></script>
<script>
var num = 1;
window.addEventListener("load", function() { // on page loade
document.getElementById("join").addEventListener("click", function(event) {
num++;
show()
})
show(); // first time
})
const pad = (num, howMany, what) => (Array(howMany).join(what) + num).slice(-howMany);
function show() {
document.getElementById('followers').innerHTML = pad(num, 10, "0")
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div class="counter-wrap">
<div id="followers" class="counter">0,000</div>
<div class="measure-wrap">
<span class="text-uppercase letter-spacing" style="top: 4px;">People</span>
</div>
</div>
<div id="idid">
TEst
<p>This is a paragraph.</p>
</div>
<button id="btn" class="button button2 btn1">Hide</button>
</body>
<style type="text/css">
.button {
opacity: 1;
display: block;
margin-left: auto;
margin-right: auto;
width: 25%;
border-radius: 30px;
text-align: center;
text-decoration: none;
background-color: #1D1D1D;
border: none;
color: white;
padding: 15px 42px;
font-size: 25px;
cursor: pointer;
outline: none;
}
.button2 {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.button:active {
background-color: #080808;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
transform: translateY(4px);
}
.counter-wrap {
text-align: center;
padding: .75rem 2rem 1.25rem;
display: inline-block;
margin: 0 auto;
background: url(../images/counter-starburst-blue.svg);
background-position: top center;
background-repeat: no-repeat;
background-size: 70px auto;
width: 100%;
}
*, ::after, ::before {
box-sizing: border-box;
}
.letter-spacing {
letter-spacing: 2px;
}
.text-uppercase {
text-transform: uppercase!important;
font-family: Montserrat,sans-serif;
color: #4d4f54;
}
.counter {
display: inline-block;
margin: 1.25rem .75rem .25rem .75rem;
font-size: 2rem;
line-height: .875;
font-weight: 900;
color: #273654;
}
</style>
</html>
解决方案
您没有选择页面上的元素。使用该querySelector
方法,您可以选择与您提供的选择器匹配的第一个元素。
$(document).ready(function() {
$(".btn1").click(function() {
$(this).hide();
});
});
var num = 1;
window.addEventListener("load", function() { // on page loade
document.querySelector(".btn1").addEventListener("click", function(event) {
num++;
show()
})
show(); // first time
})
const pad = (num, howMany, what) => (Array(howMany).join(what) + num).slice(-howMany);
function show() {
document.getElementById('followers').innerHTML = pad(num, 10, "0")
}
.button {
opacity: 1;
display: block;
margin-left: auto;
margin-right: auto;
width: 25%;
border-radius: 30px;
text-align: center;
text-decoration: none;
background-color: #1D1D1D;
border: none;
color: white;
padding: 15px 42px;
font-size: 25px;
cursor: pointer;
outline: none;
}
.button2 {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.button:active {
background-color: #080808;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
transform: translateY(4px);
}
.counter-wrap {
text-align: center;
padding: .75rem 2rem 1.25rem;
display: inline-block;
margin: 0 auto;
background: url(../images/counter-starburst-blue.svg);
background-position: top center;
background-repeat: no-repeat;
background-size: 70px auto;
width: 100%;
}
*,
::after,
::before {
box-sizing: border-box;
}
.letter-spacing {
letter-spacing: 2px;
}
.text-uppercase {
text-transform: uppercase!important;
font-family: Montserrat, sans-serif;
color: #4d4f54;
}
.counter {
display: inline-block;
margin: 1.25rem .75rem .25rem .75rem;
font-size: 2rem;
line-height: .875;
font-weight: 900;
color: #273654;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="counter-wrap">
<div id="followers" class="counter">0,000</div>
<div class="measure-wrap">
<span class="text-uppercase letter-spacing" style="top: 4px;">People</span>
</div>
</div>
<div id="idid">
TEst
<p>This is a paragraph.</p>
</div>
<button id="btn" class="button button2 btn1">Hide</button>
</body>
</html>
推荐阅读
- python - 如何在 Python 的异常错误上调用重试装饰器
- go - Keycloak.json 配置文件导入
- node.js - Google App Engine - 具有所有语言环境的 Node.js
- database - 如何从python中的文本数据中提取特征?
- pandas - 将数据框中的字典列表转换为单独的数据框
- python - 将矢量化数据提供给 keras
- c# - 将控件的属性设置为值
- google-cloud-platform - 更改 Google Cloud SQL 中的存储类型
- keras - 卷积自编码器如何学习多个类?(前数字数据)
- vb.net - 如何在 Richtextbox 中循环显示输出