多種形式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 
}