在一个 <Input> 标签中为多个按钮创建多个 ID

Posted 2023-02-23

【中文标题】在一个 <Input> 标签中为多个按钮创建多个 ID

【英文标题】：Creating Multible IDs for multible Buttons in one <Input> Tag

【发布时间】：2022-01-17 22:09:03

【问题描述】：

我正在使用 Django/Django 模板、Python 和一点 javascript 开发井字游戏。我遇到了一个问题。我只有一个 Button 循环 9 次。它的 ID 是它的索引。现在我不确定如何添加我在 javascript onclick 函数的 for 循环中定义的 index。

这里是 html 模板

             <div class="grid-container">
               % for index in object.board %
               <div class="grid-item">
                   <input onclick="change(button.id)" class="buttonsize btn-outline-purple" type="submit" value="" name="button" id="index">
               </div>
               % endfor %
           </div>
       </div>
   </article>
</form>

<script>
   function change(inputid)
       console.log("test")
       var elem = document.getElementById(inputid);
       if (elem.value=="") elem.value = "X"
   
</script>

这里是models.py

class TicTacToe(models.Model):
    player1 = models.ForeignKey(User, on_delete=models.CASCADE, default="X", related_name="tictactoe_as_player1")
    player2 = models.ForeignKey(User, on_delete=models.CASCADE, default="O", related_name="tictactoe_as_player2")
    current_player = models.ForeignKey(User, on_delete=models.CASCADE, related_name="tictactoe_current_player")
    title = models.CharField(max_length=100)
    board = models.CharField(max_length=9, default="012345678")

    def __str__(self):
        return self.title

    def get_absolute_url(self):
        return reverse('tictactoe-detail', kwargs='pk': self.pk)

这里是views.py

class TicTacToeCreateView(LoginRequiredMixin, CreateView):
    model = TicTacToe
    template_name = 'website/newgame_form.html'
    fields = ['player1', 'player2', 'current_player', 'title', 'board']

    def form_valid(self, form):
        form.instance.author = self.request.user
        return super().form_valid(form)


class TicTacToeDetailView(UpdateView):
    model = TicTacToe
    fields = ['player1', 'player2', 'current_player', 'title', 'board']

    def clean(self):
        if 'button0' in self.data:
            print('button0')

我也有一个数据库，但除了玩家 ID 之外真的没有太多内容

【参考方案1】：

给onclick添加索引应该没问题

                   <input onclick="change(index)" class="buttonsize btn-outline-purple" type="submit" value="" name="button" id="index">