Javascript could not change data in HTML tag ( Using PHP via AJAX )

Question

I'm making a quiz website, for that questions and answers will be fetched from database and using PHP and MySQL.
I've stored the options in one single column using JSON.(Stored as string array)
Question is displaying correctly but options couldn't; I've written them in similar manner.
quiz.php

echo '
    <div id="ques_block">
        <br>
        <p id="ques"></p>       
    ';
for($i=0; $i<$_SESSION["opt_size"]; $i++)
    echo '<p class="opt" id="opt'.$i.'"></p>';
echo '
    <div id="nav-for"><img src="next.png" alt="Next =>"></div>
    </div>
';

next.php will be called using AJAX when NEXT is clicked.
next.php

$sql = "SELECT QUESTION, ANSWER, OPTIONS FROM user_quiz WHERE CUST_NO=$cust_no AND QUES_NO=$new_ques_no;";
$res = mysqli_query($conn, $sql) or die("bad Query: $sql");
if(mysqli_num_rows($res)==0)
    echo "END";
else
{
    $row = mysqli_fetch_assoc($res);

    $ques = $row["QUESTION"];
    $opts = $row["OPTIONS"];

    $opt = json_decode($opts);
    $resRows = sizeof($opt);
    echo '  
        <script type="text/javascript">
            document.getElementById("ques").innerHTML="'.$ques.'";
        </script>
    ';
    for($i=0; $i<$resRows; $i++)
        echo '<script type="text/javascript">
            document.getElementById("opt'.$i.'").innerHTML = "'.$opt[$i].'";
            </script>
        ';
}

Edited:
@ADyson I'll try your method, Thanks,
BTW This is AJAX code as requested:

 $(document).ready(function(){
        $("#nav-for").click(function(){
            $.post("nextQues.php",
                {custNo: $("#custNo").val(), quesNo: $("#quesNo").val()},
                function(data){
                    $("#ques").html(data);
                }
                );
        });
    });

[Little Bobby](http://bobby-tables.com/) says ***[your script is at risk for SQL Injection Attacks.](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php)*** Learn about [prepared](http://en.wikipedia.org/wiki/Prepared_statement) statements for [MySQLi](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php). Even [escaping the string](http://stackoverflow.com/questions/5741187/sql-injection-that-gets-around-mysql-real-escape-string) is not safe! — Jay Blanchard, Oct 20 '17 at 14:23
echoing script tags isn't the way you run code following an ajax call. instead either 1) echo the _data_ as JSON, and use code in your ajax's callback to create DOM elements which incorporate that data and insert them (or modify existing DOM elements, if appropriate), or 2) echo the _completed HTML_ and use your ajax's callback method to insert that HTML into the DOM directly. Any basic ajax tutorial would show you these methods. None I've ever come across uses your convoluted approach. Script blocks downloaded via ajax won't get executed by the browser. — ADyson, Oct 20 '17 at 15:34

Javascript could not change data in HTML tag ( Using PHP via AJAX )

0 Answers0