Javascript 如何将动态ID值指定给标签？

我有以下代码：

while ($row = $result->fetch_assoc()) {
    echo "<div class='competitor' style='background: ".$row['Colour'].";'>";
    echo "<div class='competitorname'>".$row['CompetitorName']."</div><br>";
    echo "<div class='competitorscore' id='".$row['CompetitorID']."'>";
        echo"<label id='".$row['CompetitorName']."'></label></div>";
        echo "<input type='button' value='Increase' id='inc' onclick='incNumber()'/>";
        echo "<input type='button' value='Decrease' id='dec' onclick='decNumber()'/>";
}

while（$row=$result->fetch_assoc（））{
回声“；
回显“$row['CompetitorName']”。
；
回声“；
回声“；
回声“；
回声“；
}

代码链接到以下脚本：

var i = 0;

function incNumber() {
    if (i < 10) {
        i++;
    } else if (i = 10) {
        i = 0;
    }
    document.getElementById('display').innerHTML = i;
}

function decNumber() {
    if (i > 0) {
        --i;
    } else if (i = 0) {
        i = 10;
    }
    document.getElementById('display').innerHTML = i;
}

var i=0；
函数incNumber（）{
如果（i<10）{
i++；
}否则，如果（i=10）{
i=0；
}
document.getElementById（'display'）.innerHTML=i；
}
函数decNumber（）{
如果（i>0）{
--一,；
}否则如果（i=0）{
i=10；
}
document.getElementById（'display'）.innerHTML=i；
}

代码创建了一个记分牌。它为每个团队创建一个div，并为该团队打分

我遇到的问题是，“增加”和“减少”按钮只能增加和减少一个团队（第一个团队）的分数。这是因为脚本正在查找id='display'的标签，并将每个按钮链接到该标签

---

我的问题是，如何为使用脚本的每个团队创建不同的ID，以便每个增加/减少按钮链接到不同的团队？

您有一个

$row['CompetitorID']

值，该值可能是唯一的。将其附加到您正在使用的ID。

使用

CompetitorID

作为递增和递减函数的参数，告诉它要影响哪一行。您的标签：

<label id='display".$row['CompetitorID']."'></label>

然后，您的JavaScript：

function incNumber(id) {
    if (i < 10) {
        i++;
    } else if (i = 10) {
        i = 0;
    }
    document.getElementById('display' + id).innerHTML = i;
}

---

但为什么首先需要为标签分配唯一的ID呢？您需要在任何时候获取竞争对手的标签吗？谢谢！这真是奇迹。我遇到的最后一个问题是，当我应用你的修复程序时，按下按钮会增加/减少最后一个分数（即I的最后一个副本）。如果我在竞争对手1上按“增加”5次，然后在竞争对手2上按一次，它会将竞争对手2设置为6，而不是1。有办法解决这个问题吗？

function incNumber(id) {
    if (i < 10) {
        i++;
    } else if (i = 10) {
        i = 0;
    }
    document.getElementById('display' + id).innerHTML = i;
}

<input type='hidden' id='score".$row['CompetitorID']."' value='0'/>

function incNumber(id) {
        // Get the score input
        var scoreField = document.getElementById('score' + id);
        // Get the value
        var i = parseInt(scoreField.value);
        if (i < 10) {
            i++;
        } else if (i = 10) {
            i = 0;
        }
        // Set the visual score
        document.getElementById('display' + id).innerHTML = i;
        // Set the score input to the new score
        scoreField.value = i;
    }