PHP file and Javascript function doesn't capture Html div id to show hidden div after clicking submit button

Question

I have this div in index.php

 <div class="class" id="ScoreResult" style="display:none;">

and i have this function in seosystem/controller/youtubedata.php i tried using Js it didn't work so i want when the user submit the button it shows the div to display the data

if($_SERVER['REQUEST_METHOD'] == "GET" && isset($_GET['url'])  && isset($_GET['submit'])){

        /*  echo  "</br >" ; 
        echo   $input_Url_data   .  "Button clicked" ;  */    
        $id_position = strstr($input_Url_data,"=");
        $id_position = trim($id_position, "=" );
         // the alert works normally
        echo '<script> alert("heelo"); </script>';

        // this part that trying to show the div doesn't work
        echo '<script type="text/JavaScript">
        function showtable1()
        {
         
         document.getElementById( "ScoreResult").style.display = "block";
     
            
         }
                showtable1(); 
            </script>'
        ;
            
        echo "<style type=\"text/css\"> #ScoreResult {display:block;}</style>";
      }
            
        

  

This the form of the input and the button i'm not sure should i make the action index.php or seosystem/controller/youtubedata.php

<form class="d-flex justify-content-center " method="GET" action="index.php">
  <div class="input-group ">
    <input type="text" class="form-control" name="url" placeholder="Enter Youtube Video URL" aria-label="Example text with button addon" aria-describedby="button-addon1">
    <input class="btn" value="Analyze" name="submit" type="submit" id="button-addon1"></input>
  </div>
</form>

Answer 1

Add this code to your index.php file. This is how you selectively display and hide the ScoreResult div. Hope it works for you.

<?php
// This part should be added to the php section at the top of the page

// Start by setting the $url_set status to 0
$url_set = 0;
if (isset($_GET['url'])) {
    // Now we set the $url_set status to 1
    $url_set = 1;
}

?>

<div class="class" id="ScoreResult"></div>
<!--This section links the $url_set status to the code-->
<input type="hidden" value="<?php echo $url_set ?>" id="url-status">

<!--Replace your JS section with this-->
<script>
function showtable1() {
    const
        url_status = document.querySelector('#url-status').value,
        dsp_status = url_status == 1 ? 'block' : 'none'

    document.getElementById("ScoreResult").style.display = dsp_status;
}

showtable1();
</script>