亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

更新腳本中的按鈕

更新腳本中的按鈕

素胚勾勒不出你 2022-09-23 17:35:32
所以我希望在這里找到一些幫助。我在處理項目時正在學習Javascript，并且在更新頁面上按鈕的顯示狀態時遇到了一點問題。所以我想要一個條件，使出現一個按鈕，如果條件不存在，它就會消失！我有兩個按鈕，每個按鈕都應該有一定數量的點擊次數（比如說12和13），我已經能夠得到一個條件，如果按鈕1 == 12 && button2 == 13，則將按鈕的統計信息更改為阻止而不是隱藏。但是，一旦條件完成，問題就解決了，如果我再次單擊其中一個按鈕，則該按鈕（該按鈕應該在條件之后出現）即使條件不再存在，該按鈕也會保持打開狀態。//var clickNeeded = 12;var clicks = 0;var clicks1 = 0;function countDown() {    clicks += 1;    document.getElementById("test").innerHTML = clicks;    if (clicks == 12 && clicks1 == 13){        document.getElementById("step1").style.display = 'block';    }};function countDown1() {    clicks1 += 1;    document.getElementById("test1").innerHTML = clicks1;    if (clicks == 12 && clicks1 == 13){        document.getElementById("step1").style.display = 'block';    }};if (clicks != 12 && clicks1 != 13){    document.getElementById("step1").style.display = 'hidden';}function messageAfficher() {    document.getElementById("enigme").style.display = 'block';}body{    background-color: black;     }@font-face{    font-family: 'hacked';    src: url(font/Hacked-KerX.ttf);    font-style: normal;}.header{    text-align: center;    margin: 50px 100px;    font-family: hacked;}.header h1{    color: purple;    font-size: 80px;    margin: 50px    }.header p{    color: purple;    font-size: 20px;    text-align: justify;    padding-right: 100px;    padding-left: 100px; }.enigme {    color: aliceblue;    text-align: center;    font-family: hacked;}.step {    display: flex;    justify-content: center;    align-items: center;    height: 50px;}所以我唯一的想法是在我的函數后面添加一個If條件，但正如我所看到的，它不起作用，而且它的邏輯不是。所以我有點迷茫在這里^^'
查看完整描述

4 回答

?
紅顏莎娜

TA貢獻1842條經驗 獲得超13個贊

應為 而不是 。displaynonehidden


hidden與 一起使用。visibility


另外，您需要放置一個將隱藏的條件。目前你已經在外面寫了它，它不會在點擊按鈕時運行。elsestep1


function countDown() {

    clicks += 1;

    document.getElementById("test").innerHTML = clicks;

    if (clicks == 12 && clicks1 == 13){

        document.getElementById("step1").style.display = 'block';

    }else{

        document.getElementById("step1").style.display = 'none';

     }

};

function countDown1() {

    clicks1 += 1;

    document.getElementById("test1").innerHTML = clicks1;

    if (clicks == 12 && clicks1 == 13){

        document.getElementById("step1").style.display = 'block';

    }else{

        document.getElementById("step1").style.display = 'none';

     }

};

此外，由于相同的代碼塊正在重復，您可能希望將其解壓縮并放入另一個函數以重用它。并使用而不是失去比較=====


    function countDown() {

        clicks += 1;

        document.getElementById("test").innerHTML = clicks;

        hiddenOrVisible(clicks, clicks1)

    };

    function countDown1() {

        clicks1 += 1;

        document.getElementById("test1").innerHTML = clicks1;

        hiddenOrVisible(clicks, clicks1)


    };


    function hiddenOrVisible(clicks, clicks1){

      if (clicks === 12 && clicks1 === 13){

            document.getElementById("step1").style.display = 'block';

       }else{

            document.getElementById("step1").style.display = 'none';

        }

     }


查看完整回答
反對 回復 2022-09-23
?
30秒到達戰場

TA貢獻1828條經驗 獲得超6個贊

您錯過了兩件事：

  1. 每次單擊任何按鈕時，都應檢查計數條件。

  2. hidden不是屬性的有效值，請替換為 。displaynonehidden

我建議您避免在許多地方編寫重復的代碼?，F在這些是您需要做的更改，

//var clickNeeded = 12;

var clicks = 0;

var clicks1 = 0;


function checkCondition(){

   if (clicks != 12 && clicks1 != 13){

     document.getElementById("step1").style.display = 'none';

   }

   else if (clicks == 12 && clicks1 == 13){

     document.getElementById("step1").style.display = 'block';

   }

}


function countDown() {

    clicks += 1;

    document.getElementById("test").innerHTML = clicks;

    checkCondition();

}


function countDown1() {

    clicks1 += 1;

    document.getElementById("test1").innerHTML = clicks1;

    checkCondition();

};


function messageAfficher() {

    document.getElementById("enigme").style.display = 'block';

}


查看完整回答
反對 回復 2022-09-23
?
呼喚遠方

TA貢獻1856條經驗 獲得超11個贊

我將您的代碼段減少到最低限度，并將點擊次數更改為5。但除此之外，我希望它或多或少地做你想要的：你可以在兩個按鈕上單擊指定的時間，然后再次單擊以顯示最初隱藏的按鈕。


const btns=[...document.querySelectorAll('[id^=test]')];

function makevisible(id){document.querySelector('#'+id).style.display='block'}

var maxClicks=5;

document.querySelector('.buttons').addEventListener('click',function(ev){

  var b=ev.target;

  if (b.id)

    if (b.id.substr(0,4)=='test') {

      if (b.textContent<maxClicks) b.textContent=+b.textContent+1

      else if(btns.reduce((s,v)=>+v.textContent+s,0)==2*maxClicks)

        makevisible('step1')

    } else if (b.id=="step1") makevisible('enigme')

})

#step1, #enigme {display:none}

<div class="header">

  <h1>Bienvenue dans cette aventure!</h1>

  <p>Some irrelevant text (shortened).</p>

</div>

<div class="buttons">

<div class="step"><button id="test">0</button></div>

<div class="step"><button id="test1">0</button></div>

<div class="step"><button id="step1">Où suis-je?</button></div>

<div class="enigme">

  <p id="enigme">Coordonne</p>

</div>

</div>


查看完整回答
反對 回復 2022-09-23
?
回首憶惘然

TA貢獻1847條經驗 獲得超11個贊

您可以將隱藏按鈕的部分移動到單擊處理功能。


//var clickNeeded = 12;

let clicksOne = 0;

let clicksTwo = 0;



function countDown(id) {

    const buttonClicks = id === 'test1' ? ++clicksOne : ++clicksTwo;

    document.getElementById(id).innerHTML = buttonClicks;

    if (clicksOne == 12 && clicksTwo == 13){

        document.getElementById("step1").style.display = 'block';

    } else {

      document.getElementById("step1").style.display = 'none';

    }

};


function messageAfficher() {

    document.getElementById("enigme").style.display = 'block';

}

body{

    background-color: black; 

    

}


@font-face{

    font-family: 'hacked';

    src: url(font/Hacked-KerX.ttf);

    font-style: normal;

}


.header{

    text-align: center;

    margin: 50px 100px;

    font-family: hacked;

}


.header h1{

    color: purple;

    font-size: 80px;

    margin: 50px    

}


.header p{

    color: purple;

    font-size: 20px;

    text-align: justify;

    padding-right: 100px;

    padding-left: 100px; 

}


.enigme {

    color: aliceblue;

    text-align: center;

    font-family: hacked;

}


.step {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 50px;

}

<!DOCTYPE html>

<html>  

    <head>

        <meta charset="utf-8">

        <script src="fonction.js"></script> 

        <title>Escape Game</title>

        <link rel="stylesheet" href="main.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    </head>

<!--===========================================================================================================================-->

    <body>

        

        <div class="header">

            <h1>Bienvenue dans cette aventure!</h1>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>

                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

            </p>

        </div>

        

        <div class="step">

            <button id="test1" onclick="countDown(this.id)">0</button>

        </div>

        <div class="step">

            <button id="test2" onclick="countDown(this.id)">0</button>

        </div>

        <div class="step">

            <button id="step1" onclick="messageAfficher()" style="display:none">Où suis-je?</button>

        </div>

        <div class="enigme">

            <p id="enigme" style="display:none">Coordonne</p>

        </div>

        

    </body>

<!--===========================================================================================================================--> 

</html>


查看完整回答
反對 回復 2022-09-23
  • 4 回答
  • 0 關注
  • 127 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號