javascript - 我的目标是当点击正确的猜测时制作绿色的卡片，如果没有点击则制作红色的卡片

Question

有什么方法可以缩短这段代码吗？我想使用“onclick”方法来做到这一点。我的目标是当点击正确的猜测时制作绿色的卡片，如果没有点击则制作红色的卡片。我知道这是不好的代码..“翻译：谷歌”

var rest=document.getElementById("rest"),
k1=document.getElementById("k1"),
k2=document.getElementById("k2"),
k3=document.getElementById("k3"),
k4=document.getElementById("k4"),
k5=document.getElementById("k5"),
k6=document.getElementById("k6");
var ary=["k1","k2","k3","k4","k5","k6"];
function kart(){
    var R=Math.floor(Math.random()*6);
    if (ary[R]=="k1") {k1.onclick=function(){k1.style.backgroundColor="green";}}
    else{k1.onclick=function(){k1.style.backgroundColor="red";}}

            if (ary[R]=="k2") {k2.onclick=function(){k2.style.backgroundColor="green";}}
    else{k2.onclick=function(){k2.style.backgroundColor="red";}}

            if (ary[R]=="k3") {k3.onclick=function(){k3.style.backgroundColor="green";}}
    else{k3.onclick=function(){k3.style.backgroundColor="red";}}

            if (ary[R]=="k4") {k4.onclick=function(){k4.style.backgroundColor="green";}}
    else{k4.onclick=function(){k4.style.backgroundColor="red";}}

            if (ary[R]=="k5") {k5.onclick=function(){k5.style.backgroundColor="green";}}
    else{k5.onclick=function(){k5.style.backgroundColor="red";}}

            if (ary[R]=="k6") {k6.onclick=function(){k6.style.backgroundColor="green";}}
    else{k6.onclick=function(){k6.style.backgroundColor="red";}}

    
} 

function restle(){

    k1.style.backgroundColor="#000066";
    k2.style.backgroundColor="#000066";
    k3.style.backgroundColor="#000066";
    k4.style.backgroundColor="#000066";
    k5.style.backgroundColor="#000066";
    k6.style.backgroundColor="#000066";
    kart();
}
window.onload=function(){kart();}

标签： javascript

Answer 1

我觉得其中很多似乎是冗余代码，当然不看 HTML 我不能太确定，但你可以重写它以减少冗余。此外，您的程序的工作方式似乎是您选择一个随机数，并根据该随机数分配 2 个事件侦听器，这意味着单击任何其他卡都不会执行任何操作。我假设您想要做的是让用户继续点击卡片，直到他们找到正确的卡片？

为了消除冗余，我会更改 HTML，所以我假设你有 6 个<div>，每个代表一张卡片

<div class="card" id="k1"></div>
<div class="card" id="k2"></div>
<div class="card" id="k3"></div>
<div class="card" id="k4"></div>
<div class="card" id="k5"></div>
<div class="card" id="k6"></div>

像这样简单的东西，虽然你的可能看起来不同。我添加了 HTML，以便我可以遍历所有 div 元素并将正确的onclick侦听器仅应用于需要它的元素，而不必为每个元素定义它，因为就像您说的那样，您需要更短的代码。我们可以去掉很多东西来缩短整体代码。

//Let's get our random number first
var randomNumber = Math.floor(Math.random() * 6);
//Grab all cards
var cards = document.querySelectorAll("div.card"); //This method retrieves an array of elements using their CSS selector
//Now we can loop through each card and only have to write the line of code once instead of redundantly 6 times!!!
cards.forEach(function (card) {
    //Now we wanted to set their background colors to "#000066"
    card.styles.backgroundColor = "#000066";
    //Add the onclick listener
    card.addEventListener("click", function () {
        //Then we check to see if it is the correct random number id, if it is we make the background color green, if not we make it red
        if (card.getAttribute("id") == "k" + String(randumNumber)) {
            card.style.backgroundColor = "green";
        }
        else {
            card.style.backgroundColor = "red";
        }
    });
    
});