时间戳

首页 > 解决方案 > javascript for循环没有为类中的每个按钮打印正确的数据集

javascript - javascript for循环没有为类中的每个按钮打印正确的数据集

问题描述

我正在使用烧瓶、javascript 和 socketio 创建一个投票网络应用程序。我正在遍历属于vote该类的所有按钮。我正在尝试获取他们的数据投票值。出于某种原因，当单击按钮时打印 dataset.vote（如下面的函数中指定）时，它会在单击两个按钮时输出最后一个按钮的 dataset.vote。有人可以指出我的错误并帮助我解决它吗？如果您需要我指定某些内容，我很乐意这样做。

烧瓶：

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
sock =SocketIO(app)

@app.route("/")
def index():
    return render_template("index.html")

@sock.on("cast_vote")
def f(data):
    vote = data["vote"]
    print(vote)
    emit("vote_result", {"vote":vote}, broadcast=True)

HTML：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <title>SocketIO</title>
    <script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script>
    <script src="{{url_for('static', filename='main.js')}}"></script>
  </head>
  <body>
    <ul id="main"></ul>
        <button class="vote" data-vote="no">No</button>
    <button class="vote" data-vote="yes">Yes</button>
  </body>
</html>

Javascript：

document.addEventListener("DOMContentLoaded", ()=>{
  var sock = io.connect(location.protocol+"//"+document.domain+":"+location.port)
  sock.on("connect", ()=>{
    buttons = document.querySelectorAll(".vote");
    let i;
    for(i=0; i<buttons.length; ++i){
      button = buttons[i];
      button.onclick = () => {
        console.log(button.dataset.vote);
        let vote = button.dataset.vote;
        console.log(vote);
        sock.emit("cast_vote", {"vote":vote});
      };
    }
  });
  sock.on("vote_result", (data)=>{
    newli = document.createElement("li");
    newli.innerHTML=data["vote"]
    document.querySelector("#main").append(newli);
  });
});

输出：

yes
yes
yes
yes

标签： javascriptpythonhtmlflasksocket.io

解决方案

您将一些变量声明为global一个，您应该避免这种情况。

尝试更改此代码

for(i=0; i<buttons.length; ++i){
  button = buttons[i];

对这个

for(i=0; i<buttons.length; ++i){
  let button = buttons[i];

还要查看您的代码并添加var/let/const到您使用的所有其他变量中。

推荐阅读