时间戳

首页 > 解决方案 > javascript中带有if/else语句的地方的可点击内容

javascript - javascript中带有if/else语句的地方的可点击内容

问题描述

我有一个代码，其中第一部分是一个空列表，第二部分是 8 个数字按钮，我希望人们随机单击任何 6 个数字，我希望 6 个单击的数字显示在上面的空列表中，我可以它们可点击，甚至将它们发送到空列表，但我似乎无法编码如果我已经点击了一个随机数，第二个随机数将替换第一个数字或根本不显示的部分，我想要要列出的数字，因为它们是随机选择的。我希望你们都理解我的问题，谢谢你的帮助。<3

我使用了 javascript，它的工作完美无缺，我厌倦了 if-else 语句，例如（不详细说明）当单击 x 时，我希望它首先出现（这有效）“如果这个地方已经被 y , 我希望 x 下降"(

我希望随机点击的按钮在随机点击时列出。

（我是新来的，如果帮不上忙，请见谅）

编辑：代码

<head>

    <title>Choose 6 Numbers</title>

    <style type="text/css">

        .border {

        padding:0;
        border:none;
        background:none;
        background-color:none;
        outline:none;

        }

    </style>

</head>

<body>

    <p>You picked:</p>  

        <ul>

            <li id="placeOne"></li>
            <li id="placeTwo"></li>
            <li id="placeThree"></li>
            <li id="placeFour"></li>
            <li id="placeFive"></li>
            <li id="placeSix"></li>

        </ul>   

    <p>Pick 6 random numbers:</p>

        <ul>



            <li><button id="two" class="border">2</button></li>
            <li><button id="three" class="border">3</button></li>
            <li><button id="one" class="border">1</button></li>
            <li><button id="seven" class="border">7</button></li>
            <li><button id="six" class="border">6</button></li>
            <li><button id="nine" class="border">9</button></li>
            <li><button id="eight" class="border">8</button></li>
            <li><button id="four" class="border">4</button></li>
            <li><button id="zero" class="border">0</button></li>
            <li><button id="five" class="border">5</button></li>

        </ul>

        <button onClick="window.location.reload();">Reset</button>
        <button>Submit</button>

    <script type="text/javascript">

        document.getElementById("two").onclick = function() {

        document.getElementById("placeOne").innerHTML = "2";

        }

        document.getElementById("three").onclick = function() {

        document.getElementById("placeOne").innerHTML = "3";

        }

        document.getElementById("one").onclick = function() {

        document.getElementById("placeOne").innerHTML = "1";

        }

        document.getElementById("seven").onclick = function() {

        document.getElementById("placeOne").innerHTML = "7";

        }

        document.getElementById("six").onclick = function() {

        document.getElementById("placeOne").innerHTML = "6";

        }

        document.getElementById("nine").onclick = function() {

        document.getElementById("placeOne").innerHTML = "9";

        }

        document.getElementById("eight").onclick = function() {

        document.getElementById("placeOne").innerHTML = "8";

        }

        document.getElementById("four").onclick = function() {

        document.getElementById("placeOne").innerHTML = "4";

        }

        document.getElementById("zero").onclick = function() {

        document.getElementById("placeOne").innerHTML = "0";

        }

        document.getElementById("five").onclick = function() {

        document.getElementById("placeOne").innerHTML = "5";

        }

    </script>

</body>

标签： javascriptif-statement

解决方案

 <html>
 <head>

 <title>Choose 6 Numbers</title>

 <style type="text/css">

    .border {

    padding:0;
    border:none;
    background:none;
    background-color:none;
    outline:none;

    }

</style>

</head>

<body>

<p>You picked:</p>  

    <ul>

        <li id="place1"></li>
        <li id="place2"></li>
        <li id="place3"></li>
        <li id="place4"></li>
        <li id="place5"></li>
        <li id="place6"></li>

    </ul>   

<p>Pick 6 random numbers:</p>

    <ul >
        <li><button id="two" class="border">2</button></li>
        <li><button id="three" class="border">3</button></li>
        <li><button id="one" class="border">1</button></li>
        <li><button id="seven" class="border">7</button></li>
        <li><button id="six" class="border">6</button></li>
        <li><button id="nine" class="border">9</button></li>
        <li><button id="eight" class="border">8</button></li>
        <li><button id="four" class="border">4</button></li>
        <li><button id="zero" class="border">0</button></li>
        <li><button id="five" class="border">5</button></li>

    </ul>

    <button onClick="window.location.reload(true);">Reset</button>
    <button>Submit</button>

<script type="text/javascript">
 let i=1;
var classname = document.getElementsByClassName("border");
for (var j = 0; j< classname.length; j++) {
classname[j].addEventListener('click',function() {
var attribute = this.innerHTML;
if(i<7)
{
     document.getElementById("place"+i).innerHTML = attribute;
     i++;
 }
alert(attribute);
})
} 

</script>

</body>
</html>

所以我替换了 document.getelement 并用一个 getclass 替换它以获取所有类似的按钮。使用 i 跟踪添加并将其放入列表中。

推荐阅读