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

在不知道输入或查看结果的情况下，很难确定，但看起来您可能会在同一页面上生成此表单的多个实例，从而为您提供名为“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中编写querySelector

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

多个表单onclick事件仅适用于第一个表单

2 个答案: