这些 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);
}
翻过高山走不出你1回答
-
慕姐8265434
您没有选择页面上的元素。使用该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>
随时随地看视频慕课网APP
相关分类
JavaScript