多种形式onclick事件只适用于第一种形式

Question

我敢肯定这已被问到但我似乎无法在搜索中找到它 我有一个页面上的多个窗体生成的PHP所有onCick事件 问题是，它只有经过拿起第一个事件的任何其他点击产生相同的结果，从第一次点击 这里是JavaScript的

function CompareScores(form) 
    { 

var scoreA = document.getElementById("score_A").value; 
var scoreB = document.getElementById("score_B").value; 

if(scoreA > scoreB){ 
    alert('Score A is Larger ' + scoreA) 
    }else{ 
    alert('Score B is Larger ' + scoreB) 
     } 
    } 

，而PHP的产生形成

<?php 
    while($i<=$numPrelimTeams) { 

     if($i!=$e) { 
?> 
<form action="processScores.php" method="post"><p><u><?php echo $prelimTeam[$i]; ?> --> SCORE : <input type="text" class="small" id="score_A" name="score_A" size="1"></u></p> 
    <input type="hidden" name="team_A" value="<?php echo $prelimTeam[$i]; ?>"> 
    <input type="hidden" name="game" value="<?php echo $game_num; ?>"> 
    <p class="right">Game # <?php echo $game_num; ?>) <input type="button" value="Enter Scores" onClick="CompareScores(this.form)"></p> 
<?php 
     }else{ 
?> 
    <p><u><?php echo $prelimTeam[$i]; ?> --> SCORE : <input type="text" class="small" id="score_B" name="score_B" size="1"></u></p> 
    <input type="hidden" name="team_B" value="<?php echo $prelimTeam[$i]; ?>"> 

    </form><br><br><br> 


<?php 
     $game_num++; 
     $e=$e+2; 
     } 
    $i++; 
    } 
?> 

Answer 1

如果不知道INP或者看到结果，很难说清楚，但看起来您可能会在同一页面上生成此表单的多个实例，从而为您提供了多个名为“score_A”和“score_B”的页面元素。 document.getElementById将会变得有点模糊。

既然你已经发送表单对象，请使用来代替：

var scoreA = form.score_A.value; 
... 

Answer 2

有本质上是你的代码的单一问题。您有多个相同ID的实例。

要修复它，尝试这样的事情。

<input type="text" class="small score_A" name="score_A" size="1" /> 

同样

<input type="text" class="small score_B" name="score_B" size="1" /> 

现在，你可以在你的JS

function CompareScores(form) { 
    var a = form.querySelector('.score_A').value; 
    var b = form.querySelector('.score_B').value; 
    //do something 
}