Question

我能找到的唯一相关的链接是使用jQuery，我现在正试图坚持使用JavaScript。

这是我的HTML：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="Chat.css">
    <script src="TTT.js"></script>
    <title>'Tic Tac Toe'</title>
</head>
<body>
<div class="game">

    <button type="button" class="row1 block" name="one"></button>
    <button type="button" class="row1 block" name="two"></button>
    <button type="button" class="row1 block" name="three"></button>
    <br>
    <button type="button" class="row2 block" name="four"></button>
    <button type="button" class="row2 block" name="five"></button>
    <button type="button" class="row2 block" name="six"></button>
    <br>
    <button type="button" class="row3 block" name="seven"></button>
    <button type="button" class="row3 block" name="eight"></button>
    <button type="button" class="row3 block" name="nine"></button>
</div>
</body>
</html>

我基本上希望此函数查看选择了哪个按钮名称，并更改类以指示此选择。

var  buttons= document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function() {
        var number=(element.attr('name'));
        document.getElementsByName(number).onclick
        var chosenblock=document.getElementsByName(number);
        chosenblock.classList.toggle('chosen');
    });
}

这是我现在拥有的JavaScript。如果上面已经添加了事件监听器，那么.onclick是否需要在那里？除此之外，我如何才能使此点击切换我的班级chosen。我只是对这种设置感到困惑。

这是JSfiddle。此外，如果你想给我一个关于制作这个井字游戏的指针，请随意（自从代码学以来的第一个项目，它绝对让你觉得它教你比实际更多）。无论如何，感谢帮助人员。

Answer 1

我认为你需要的是这样的：

var  buttons= document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function(e) {
        var chosenblock=e.target;
        if (chosenblock.className.match(' chosen')) {
            chosenblock.className.replace(' chosen','');
        } else {
            chosenblock.className += (' chosen');
        }
    });
}

您不需要.onclick，因为您已经向元素添加了ClickEventListener。代码假定您可能有其他类与按钮关联（因此“选择”之前的空格）。此外，该函数接收一个EventElement e，您可以从中获取目标按钮。

Answer 2

你有几件事......

第一

var  buttons= document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function() {
        var number=(element.attr('name'));
        document.getElementsByName(number).onclick
        var chosenblock=document.getElementsByName(number);
        chosenblock.classList.toggle('chosen');
    });
}

这一行

var number=(element.attr('name'));

element来自哪里？无处不在。如果您坚持使用纯JavaScript，则应使用this和getAttribute

此引用了单击的元素本身，然后使用getAttribute获取其名称

    var number=this.getAttribute('name');

    // [0] will return the first element since .getElementsByName returns an array
    var chosenblock=document.getElementsByName(number)[0];

稍后你有了这个

document.getElementsByName(number).onclick

首先，它应该是.click而不是onclick，但是你的代码在EventListener内部监听点击，所以......你不需要它！：d

继续前进......

你的第一个陈述就是这个

if (chosenblock.classList.contains('chosen'){
    return false;
}

你错过了)！只需像这样添加它

if (chosenblock.classList.contains('chosen')) // <-- :D !
{
    return false;
}

其他if语句怎么样？

    if (computerchoice >= 0 && < 1) {
        compselected('one');
    }

你知道那里有什么问题吗？您的陈述应该说：如果computerchoice大于或等于零且computerchoice小于一

所以你修复了computerchoice

之后添加&的问题

    if (computerchoice >= 0 && computerchoice < 1) {
        compselected('one');
    }

那么简单！ （注意：在所有if语句中都这样做，它们都错了）

最后你有一个};导致麻烦:(我们应该杀了它！不，只是删除它。

如果你什么都不懂，这里是fiddle，上面有更正。

我希望它可以帮到你：P

<强>更新

我没有在CSS中看到问题：3

这就是你拥有的

.chosen {
    display:inline-block;
    background-color: red;
    border:2px solid black;
    font-size: 25px;
    font-weight: bolder;
    height:150px;
    width:200px;
    padding-top:5px;
    justify-content: center;
    position: relative;
    text-align:center;
    .chosen:before{   /* This should be outside! */
        content: "X"
    }
}

看到您将.chosen:before {...}括在.chosen {...}内？把它移到外面！

.chosen {
    display:inline-block;
    background-color: red;
    border:2px solid black;
    font-size: 25px;
    font-weight: bolder;
    height:150px;
    width:200px;
    padding-top:5px;
    justify-content: center;
    position: relative;
    text-align:center;
}

.chosen:before{
    content: "X"
}

我已经更新了fiddle

享受！：d

Answer 3

对于您的点击操作，您编写了如此多的代码。而不是尝试这个简化的代码

 $( ".block" ).bind( "click", function() {
 if($(this).hasClass("chosen"))
 {$(this).removeClass("chosen"); }
   else
   {$(this).addClass("chosen");}
});

找到更新后的http://jsfiddle.net/8qmku0dx/5/ 我不擅长CSS所以只尝试代码

如何使我的onclick事件选择使用Javascript单击的元素的id？

3 个答案: