Open Another Input Text when the user selects an option

I am a newbie and I have this project where the user should have the option of custom input if the listed options are not in dropdown.

HTML

<div class="form-group">
            <label  class="col-sm-2 col-form-label">Select Page Size</label>
            <select name = 'pageSelector' class="col-sm-3">   
                <option value ="">Select Page Size</option> 
                <option value ="84.1|118.9">A0</option> 
                <option value = "59.4|84.1">A1</option> 
                <option value = "7.4|10.5">A7</option> 
                <option value = "custom">Select Custom</option> 
            </select> 
        </div> 

PHP

if(isset($_POST["pageSelector"]))
{
    $result = $_POST['pageSelector'];
    if($result == "")
    {
        echo "<script>alert('Please select the Page')</script>";   
    }
    
    $result_explode = explode('|', $result);
    $width_page = $result_explode[0];
    $height_page = $result_explode[1];
    

    // Converting the string variables to integer
    $width_plate=(double)$width_plate;
    $height_plate=(double)$height_plate;
    $width_page=(double)$width_page;
    $height_page=(double)$height_page;


    // To calculate the number of pages that can be print with one selected plate
    $calculated_width = $width_plate/$width_page;
    $calculated_height = $height_plate/$height_page;
    $print_include = (int)$calculated_height*(int)$calculated_width;

    echo "<div class='h1'>Number of Prints in one plate ".$print_include." prints</div> ";

}

I would like if the user selects the custom option then a input text should appear on the screen.

Answer

var pageSelector = document.getElementById('pageSelector');
var customInput = document.getElementById('customInput');

pageSelector.addEventListener('change', function(){
    if(this.value == "custom") {
        customInput.classList.remove('hide');
    } else {
        customInput.classList.add('hide');
    }
})

.hide {
    width: 0;
    height: 0;
    opacity: 0;
}

<div class="form-group">
    <label  class="col-sm-2 col-form-label">Select Page Size</label>
    <select name = 'pageSelector' class="col-sm-3 page" id="pageSelector">
        <option value ="">Select Page Size</option> 
        <option value ="84.1|118.9">A0</option> 
        <option value = "59.4|84.1">A1</option> 
        <option value = "7.4|10.5">A7</option> 
        <option value = "custom">Select Custom</option>
    </select>
    <input type="text" class="hide" placeholder="Custom Selector" name="custom" id="customInput">
</div>