Question

我正在创建一个php页面，显示mcq问题以及数据库中的选项和答案。在这里，我使用html按钮显示/隐藏答案。但它仅适用于第一个问题，但在点击其他问题时，它仅适用于第一个问题。请帮助

<script>
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
    x.style.display = 'block';
} else {
    x.style.display = 'none';
}
}
</script>


<?php
        while($row = mysqli_fetch_array($result))
        {
            echo "<h4 style=font-weight:bold; text-align:justify>";
            echo "Q $row[slno]) $row[question]";
            echo "</h4><br>";
            echo "<ul class=list-group>";
            echo "<li class=list-group-item>1) $row[option1]</li>";
            echo "<li class=list-group-item>2) $row[option2]</li>";
            echo "<li class=list-group-item>3) $row[option3]</li>";
            echo "<li class=list-group-item>4) $row[option4]</li>";
            echo "<li class=list-group-item>5) $row[option5]</li>";
            echo "<div id=myDIV style=display:none><li class=list-group-item><b>Correct Option : ($row[correct_option])</b></div></li>";
            echo "<li class=list-group-item><button onclick=myFunction()>View Answer</button></li>";
            echo "</ul>";
            echo "<hr color=#FF0000 size=5 width=100%>";
        }
    ?>

任何建议......

Answer 1

试试这个..

 <script>
    function myFunction(num) {
    var x = document.getElementById('myDIV'+num);
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
    }
    </script>


<?php
  $num=1;
        while($row = mysqli_fetch_array($result))
        {
            echo "<h4 style=font-weight:bold; text-align:justify>";
            echo "Q $row[slno]) $row[question]";
            echo "</h4><br>";
            echo "<ul class=list-group>";
            echo "<li class=list-group-item>1) $row[option1]</li>";
            echo "<li class=list-group-item>2) $row[option2]</li>";
            echo "<li class=list-group-item>3) $row[option3]</li>";
            echo "<li class=list-group-item>4) $row[option4]</li>";
            echo "<li class=list-group-item>5) $row[option5]</li>";
            echo "<div id=myDIV".$num." style=display:none><li class=list-group-item><b>Correct Option : ($row[correct_option])</b></div></li>";
            echo "<li class=list-group-item><button onclick=myFunction('".$num."')>View Answer</button></li>";
            echo "</ul>";
            echo "<hr color=#FF0000 size=5 width=100%>";
          $num++;
        }

    ?>

Answer 2

试试这个：

您的ID必须对每条记录都是唯一的。

<script>
function myFunction(elem) {
var x = document.getElementById('myDIV'+elem);
if (x.style.display === 'none') {
    x.style.display = 'block';
} else {
    x.style.display = 'none';
}
}
</script>


<?php

    while($row = mysqli_fetch_array($result))
    {
        echo "<h4 style=font-weight:bold; text-align:justify>";
        echo "Q $row[slno]) $row[question]";
        echo "</h4><br>";
        echo "<ul class=list-group>";
        echo "<li class=list-group-item>1) $row[option1]</li>";
        echo "<li class=list-group-item>2) $row[option2]</li>";
        echo "<li class=list-group-item>3) $row[option3]</li>";
        echo "<li class=list-group-item>4) $row[option4]</li>";
        echo "<li class=list-group-item>5) $row[option5]</li>";
        echo "<div id=myDIV'".$row['slno']."' style=display:none><li class=list-group-item><b>Correct Option : ($row[correct_option])</b></div></li>";
        echo "<li class=list-group-item><button onclick=myFunction('".$row['slno']."')>View Answer</button></li>";
        echo "</ul>";
        echo "<hr color=#FF0000 size=5 width=100%>";
    }
?>

显示/隐藏按钮不起作用

2 个答案: