更新脚本中的按钮

Question

所以我希望在这里找到一些帮助。我在处理项目时正在学习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条件，但正如我所看到的，它不起作用，而且它的逻辑不是。所以我有点迷茫在这里^^'

Answer 1

应为 而不是 。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';

        }

     }

Answer 2

您错过了两件事：

1. 每次单击任何按钮时，都应检查计数条件。

2. hidden不是属性的有效值，请替换为 。displaynonehidden

我建议您避免在许多地方编写重复的代码。现在这些是您需要做的更改，

//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';

}

Answer 3

我将您的代码段减少到最低限度，并将点击次数更改为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>

Answer 4

您可以将隐藏按钮的部分移动到单击处理功能。

//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>