Question

我有4个按钮，每个按钮在页面上添加一个图像元素...
我希望我的客户仅能通过单击每个按钮来添加14个元素，例如...
这意味着如果客户在按钮1上单击了五次，在按钮2上单击了五次，在按钮3上单击了两次，在按钮4上单击了两次：所有按钮都变为禁用状态... 谢谢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=El+Messiri&display=swap" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Fast Food</title>
    <style>
    @-webkit-keyframes fade-in-bck{0%{-webkit-transform:translateZ(80px);transform:translateZ(80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes fade-in-bck{0%{-webkit-transform:translateZ(80px);transform:translateZ(80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@-webkit-keyframes fade-in-bl{0%{-webkit-transform:translateX(-50px) translateY(50px);transform:translateX(-50px) translateY(50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@keyframes fade-in-bl{0%{-webkit-transform:translateX(-50px) translateY(50px);transform:translateX(-50px) translateY(50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@-webkit-keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@-webkit-keyframes fade-in-br{0%{-webkit-transform:translateX(50px) translateY(50px);transform:translateX(50px) translateY(50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@keyframes fade-in-br{0%{-webkit-transform:translateX(50px) translateY(50px);transform:translateX(50px) translateY(50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@-webkit-keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@-webkit-keyframes fade-in-left{0%{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-left{0%{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@-webkit-keyframes fade-in-right{0%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-right{0%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@-webkit-keyframes fade-in-tl{0%{-webkit-transform:translateX(-50px) translateY(-50px);transform:translateX(-50px) translateY(-50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@keyframes fade-in-tl{0%{-webkit-transform:translateX(-50px) translateY(-50px);transform:translateX(-50px) translateY(-50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@-webkit-keyframes fade-in-top{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-top{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@-webkit-keyframes fade-in-tr{0%{-webkit-transform:translateX(50px) translateY(-50px);transform:translateX(50px) translateY(-50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@keyframes fade-in-tr{0%{-webkit-transform:translateX(50px) translateY(-50px);transform:translateX(50px) translateY(-50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}
    .fade-in{-webkit-animation:fade-in 0.5s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in 0.5s cubic-bezier(.39,.575,.565,1.000) both}
    .main{
        width: 80%;
        height: auto;
        background-image: #000;
        margin: 10px;
    }
    .pduct{

    }
    .btnS{
        display: flex;
        justify-content: center;
        margin: auto;
        margin-top: 25px;
        border-radius: 15px;
        border: none;
        width: 100%;
        height: 45px;
        font-family: 'El Messiri';
        font-weight:100;
        color:cornsilk;
    }
    #footer{
        position: fixed;
        bottom: 20px;
        width: 100%;
        justify-content: center;
        margin: auto;
        display: inline-flex;
    }
    ::-webkit-scrollbar {
    width: 1px;
}
    </style>
</head>
<body style="background-color: black;" >
<div class="container" style="overflow:scroll; height:650px; max-height: 650px; border-radius:8px; background-image: linear-gradient(#fff , rgb(236, 154, 154) , rgba(236, 0, 0, 0.993)); margin-top: 25px;;">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 ">
<center><img src="http://s7.picofile.com/file/8378174142/head.png" style="width: 70%; height:auto; margin: 10px;"></center>

<center><div id="mini" class="main"></div></center>

<center><img src="http://s6.picofile.com/file/8378174150/footer.png" style="width: 70%; height:auto; margin:auto; margin-top: 10px; "></center>

</div>
<div class="container" id="footer">
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button onclick="burger()" class="btnS" style="background-color: rgb(172, 107, 83);" id="test">برگر</button>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button onclick="Lettuce()" class="btnS" style="background-color: rgb(0, 129, 0);">کاهو</button>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button onclick="tomato()" class="btnS" style="background-color: rgb(221, 8, 8);">گوجه</button>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button onclick="cheese()" class="btnS" style="background-color: rgb(182, 103, 0);">پنیر</button>
</div>
</div>
</div>
</div>
<script>
function burger(){
var burger = document.createElement('img');
burger.setAttribute('src' , 'http://s6.picofile.com/file/8378174184/burg.png');
burger.setAttribute('class' , 'fade-in');
burger.setAttribute('width' , '80%');
burger.setAttribute('height' , '35px');
document.getElementById('mini').appendChild(burger);
}
</script>
<script>
function Lettuce(){
var burger = document.createElement('img');
burger.setAttribute('src' , 'http://s6.picofile.com/file/8378174126/kahoo.png');
burger.setAttribute('width' , '80%');
burger.setAttribute('height' , '20px');
burger.setAttribute('class' , 'fade-in');
document.getElementById('mini').appendChild(burger);
}
</script>
<script>
 function tomato(){
var burger = document.createElement('img');
burger.setAttribute('src' , 'http://s7.picofile.com/file/8378174118/tomato.png');
burger.setAttribute('width' , '80%');
burger.setAttribute('height' , '25px');
burger.setAttribute('class' , 'fade-in');
document.getElementById('mini').appendChild(burger);
}
</script>
<script>
function cheese(){
var burger = document.createElement('img');
burger.setAttribute('src' , 'http://s7.picofile.com/file/8378174168/cheese.png');
burger.setAttribute('width' , '80%');
burger.setAttribute('height' , '10px');
burger.setAttribute('class' , 'fade-in');
document.getElementById('mini').appendChild(burger);
}
</script>

</body>
</html>

Answer 1

我认为这可能会有所帮助。

Widget _getBody() {
    double bottomPadding = 0;
    if (isKeyboardVisible) {
      // when keyboard is shown, our floating widget is above the keyboard and its accessories by `16`
      bottomPadding = MediaQuery.of(context).viewInsets.bottom + 16;
    } else {
      // when keyboard is hidden, we should have default spacing
      bottomPadding = 48; // MediaQuery.of(context).size.height * 0.15;
    }

    return Stack(children: <Widget>[
      Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("assets/sample.jpg"), fit: BoxFit.fitWidth)),
        // color: Color.fromARGB(50, 200, 50, 20),
        child: Column(
          children: <Widget>[TextField()],
        ),
      ),
      AnimatedPositioned(
        duration: Duration(milliseconds: 500),
        bottom: bottomPadding,
        left: 0,
        right: 0,
        child: Container(
          height: 50,
          child: Text("Aboveeeeee"),
          decoration: BoxDecoration(color: Colors.pink),
        ),
      ),
    ]);
}

您可以通过这种方式使用它，也可以通过将您在每个按钮上调用的JS函数中的if条件中的代码放入代码中来单击，如下面的函数window.onload = function () { var count = 0; buttonID.onclick = function(){ if (count >= 14) { button1ID.disabled = true; button2ID.disabled = true; button3ID.disabled = true; button4ID.disabled = true; } else count++; }; }

disableAllButtons

Answer 2

在函数外添加全局变量，并在每次单击时保持沉默。如果点击次数等于最高限制，请禁用该按钮：

var clickcount = 0;
function burger(){
    clickcount++;
    if(clickcount == 5){
        document.getElementById("button1").disabled = true;
       // return; return is not needed because button is disabled now...
    }
    // Your code
}

<button onclick="burger()" id="button1"> button 1</button>

Answer 3

    function cheese(){
    var burger = document.createElement('img');
    burger.setAttribute('src' , 'http://s7.picofile.com/file/8378174168/cheese.png');
    burger.setAttribute('width' , '80%');
    burger.setAttribute('height' , '10px');
    burger.setAttribute('class' , 'fade-in');
    document.getElementById('mini').appendChild(burger);

     count();
 }

function count(){

 if(document.getElementById("mini").childElementCount == 14)
    {
        button1ID.disabled = true;
        button2ID.disabled = true;
        button3ID.disabled = true;
        button4ID.disabled = true;
    } 
}

Answer 4

我只是使用您的代码来简化它。您需要创建一个全局变量，然后在每次单击按钮时将其递增，当条件匹配时，只需禁用按钮即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=El+Messiri&display=swap" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Fast Food</title>
    <style>
    @-webkit-keyframes fade-in-bck{0%{-webkit-transform:translateZ(80px);transform:translateZ(80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes fade-in-bck{0%{-webkit-transform:translateZ(80px);transform:translateZ(80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@-webkit-keyframes fade-in-bl{0%{-webkit-transform:translateX(-50px) translateY(50px);transform:translateX(-50px) translateY(50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@keyframes fade-in-bl{0%{-webkit-transform:translateX(-50px) translateY(50px);transform:translateX(-50px) translateY(50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@-webkit-keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@-webkit-keyframes fade-in-br{0%{-webkit-transform:translateX(50px) translateY(50px);transform:translateX(50px) translateY(50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@keyframes fade-in-br{0%{-webkit-transform:translateX(50px) translateY(50px);transform:translateX(50px) translateY(50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@-webkit-keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@-webkit-keyframes fade-in-left{0%{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-left{0%{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@-webkit-keyframes fade-in-right{0%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-right{0%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@-webkit-keyframes fade-in-tl{0%{-webkit-transform:translateX(-50px) translateY(-50px);transform:translateX(-50px) translateY(-50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@keyframes fade-in-tl{0%{-webkit-transform:translateX(-50px) translateY(-50px);transform:translateX(-50px) translateY(-50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@-webkit-keyframes fade-in-top{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-top{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@-webkit-keyframes fade-in-tr{0%{-webkit-transform:translateX(50px) translateY(-50px);transform:translateX(50px) translateY(-50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@keyframes fade-in-tr{0%{-webkit-transform:translateX(50px) translateY(-50px);transform:translateX(50px) translateY(-50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}
    .fade-in{-webkit-animation:fade-in 0.5s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in 0.5s cubic-bezier(.39,.575,.565,1.000) both}
    .main{
        width: 80%;
        height: auto;
        background-image: #000;
        margin: 10px;
    }
    .pduct{

    }
    .btnS{
        display: flex;
        justify-content: center;
        margin: auto;
        margin-top: 25px;
        border-radius: 15px;
        border: none;
        width: 100%;
        height: 45px;
        font-family: 'El Messiri';
        font-weight:100;
        color:cornsilk;
    }
    #footer{
        position: fixed;
        bottom: 20px;
        width: 100%;
        justify-content: center;
        margin: auto;
        display: inline-flex;
    }
    ::-webkit-scrollbar {
    width: 1px;
}
    </style>
</head>
<body style="background-color: black;" >
<div class="container" style="overflow:scroll; height:650px; max-height: 650px; border-radius:8px; background-image: linear-gradient(#fff , rgb(236, 154, 154) , rgba(236, 0, 0, 0.993)); margin-top: 25px;;">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 ">
<center><img src="http://s7.picofile.com/file/8378174142/head.png" style="width: 70%; height:auto; margin: 10px;"></center>

<center><div id="mini" class="main"></div></center>

<center><img src="http://s6.picofile.com/file/8378174150/footer.png" style="width: 70%; height:auto; margin:auto; margin-top: 10px; "></center>

</div>
<div class="container" id="footer">
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button onclick="burger()" class="btnS" style="background-color: rgb(172, 107, 83);" id="test">1</button>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button onclick="Lettuce()" class="btnS" style="background-color: rgb(0, 129, 0);">2</button>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button onclick="tomato()" class="btnS" style="background-color: rgb(221, 8, 8);">3</button>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button onclick="cheese()" class="btnS" style="background-color: rgb(182, 103, 0);">4
</button>
</div>
</div>
</div>
</div>
<script>
var count = 0
var disable = document.getElementsByClassName('btnS');
function burger(){
var burger = document.createElement('img');
burger.setAttribute('src' , 'http://s6.picofile.com/file/8378174184/burg.png');
burger.setAttribute('class' , 'fade-in');
burger.setAttribute('alt' , 'burger');
burger.setAttribute('width' , '80%');
burger.setAttribute('height' , '35px');
document.getElementById('mini').appendChild(burger);
count +=1
if(count == 14 ){
disable[0].setAttribute('disabled' ,true);
disable[1].setAttribute('disabled' ,true);
disable[2].setAttribute('disabled' ,true);
disable[3].setAttribute('disabled' ,true);
}
}
function Lettuce(){
var burger = document.createElement('img');
burger.setAttribute('src' , 'http://s6.picofile.com/file/8378174126/kahoo.png');
burger.setAttribute('width' , '80%');
burger.setAttribute('alt' , 'kahoo');
burger.setAttribute('height' , '20px');
burger.setAttribute('class' , 'fade-in');
document.getElementById('mini').appendChild(burger);
count +=1
if(count == 14 ){
disable[0].setAttribute('disabled' ,true);
disable[1].setAttribute('disabled' ,true);
disable[2].setAttribute('disabled' ,true);
disable[3].setAttribute('disabled' ,true);
}
}

 function tomato(){
var burger = document.createElement('img');
burger.setAttribute('src' , 'http://s7.picofile.com/file/8378174118/tomato.png');
burger.setAttribute('width' , '80%');
burger.setAttribute('alt' , 'tomato');
burger.setAttribute('height' , '25px');
burger.setAttribute('class' , 'fade-in');
document.getElementById('mini').appendChild(burger);
count +=1
if(count == 14 ){
disable[0].setAttribute('disabled' ,true);
disable[1].setAttribute('disabled' ,true);
disable[2].setAttribute('disabled' ,true);
disable[3].setAttribute('disabled' ,true);
}
}

function cheese(){
var burger = document.createElement('img');
burger.setAttribute('src' , 'http://s7.picofile.com/file/8378174168/cheese.png');
burger.setAttribute('width' , '80%');
burger.setAttribute('height' , '10px');
burger.setAttribute('alt' , 'cheese');
burger.setAttribute('class' , 'fade-in');
document.getElementById('mini').appendChild(burger);
count +=1
if(count == 14 ){
disable[0].setAttribute('disabled' ,true);
disable[1].setAttribute('disabled' ,true);
disable[2].setAttribute('disabled' ,true);
disable[3].setAttribute('disabled' ,true);
}
}
</script>

</body>
</html>

Answer 5

Hey 100% tested Answer -hope this will help u- do changes after body-

    <!DOCTYPE html>
<body style="background-color: black;" >
<div class="container" style="overflow:scroll; height:650px; max-height: 650px; border-radius:8px; background-image: linear-gradient(#fff , rgb(236, 154, 154) , rgba(236, 0, 0, 0.993)); margin-top: 25px;;">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 ">
<center><img src="http://s7.picofile.com/file/8378174142/head.png" style="width: 70%; height:auto; margin: 10px;"></center>

<center><div id="mini" class="main"></div></center>

<center><img src="http://s6.picofile.com/file/8378174150/footer.png" style="width: 70%; height:auto; margin:auto; margin-top: 10px; "></center>

</div>
<div class="container" id="footer">
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button onclick="burger();cnt();" class="btnS" id="myBtn3" style="background-color: rgb(172, 107, 83);" id="test">برگر</button>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button onclick="Lettuce();cnt();" class="btnS" id="myBtn2" style="background-color: rgb(0, 129, 0);">کاهو</button>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button onclick="tomato();cnt();" class="btnS" id="myBtn1" style="background-color: rgb(221, 8, 8);">گوجه</button>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<button onclick="cheese();cnt();" class="btnS" id="myBtn" style="background-color: rgb(182, 103, 0);">پنیر</button>
</div>
</div>
</div>
</div>
<script>
    var clicks=0;
    count=0;
function burger(){
      clicks += 1;

var burger = document.createElement('img');
burger.setAttribute('src' , 'http://s6.picofile.com/file/8378174184/burg.png');
burger.setAttribute('class' , 'fade-in');
burger.setAttribute('width' , '80%');
burger.setAttribute('height' , '35px');
document.getElementById('mini').appendChild(burger);

}

function Lettuce(){
      clicks += 1;
var burger = document.createElement('img');
burger.setAttribute('src' , 'http://s6.picofile.com/file/8378174126/kahoo.png');
burger.setAttribute('width' , '80%');
burger.setAttribute('height' , '20px');
burger.setAttribute('class' , 'fade-in');
document.getElementById('mini').appendChild(burger);

}

 function tomato(){
      clicks += 1;
var burger = document.createElement('img');
burger.setAttribute('src' , 'http://s7.picofile.com/file/8378174118/tomato.png');
burger.setAttribute('width' , '80%');
burger.setAttribute('height' , '25px');
burger.setAttribute('class' , 'fade-in');
document.getElementById('mini').appendChild(burger);

}


function cheese(){
    clicks += 1;
var burger = document.createElement('img');
burger.setAttribute('src' , 'http://s7.picofile.com/file/8378174168/cheese.png');
burger.setAttribute('width' , '80%');
burger.setAttribute('height' , '10px');
burger.setAttribute('class' , 'fade-in');
document.getElementById('mini').appendChild(burger);

}

function cnt()
{

var x=clicks;
if(x==14)
{
    myFunction();

}
function myFunction() {
  document.getElementById("myBtn").disabled = true;
  document.getElementById("myBtn1").disabled = true;
  document.getElementById("myBtn2").disabled = true;
  document.getElementById("myBtn3").disabled = true;
}
}

</script>

</body>
</html>

单击几次后如何禁用按钮功能？

5 个答案: