javascript - why i get Uncaught TypeError: Cannot set properties of undefined (setting 'src')?

i tried to modify the src of an img with javascript in php and i got: Uncaught TypeError: Cannot set properties of undefined (setting 'src') didn't understand it like you see i got some values from a data base and when i did prod1.src=tab4 the give me the error

my code:

<div class="row product-active">
                            <div class="col-xl-3">
                                <div class="shop-item">
                                    <div class="product-thumb">
                                        <a><img id='prod1111' src=""></a>
                                    </div>
                                    <div class="product-content">
                                        <div class="product-tag"><a href="addshop.php" id='prod1n'>ADD PRODUCT</a>
                                        </div>
                                        <h4 id='prod1q'></h4>
                                        <div class="product-meta">
                                            <div class="product-price">
                                                <h5 id='prod1p'></h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
 <?php
$product = $_POST;
$img = $_FILES['file'];
require 'C:/xampp/htdocs/web/foreal/controller/merch.php';
if ($product['namep'] != ''& $product['price'] != ''& $product['quantity'] != ''& $img['name'] != '') {
    $merch = new merch;
    $merch->add($product, $img);
    $tab = $merch->affiche();
    $tab1 = $tab[0]['name'];
    $tab2 = $tab[0]['quantity'];
    $tab3 = $tab[0]['price'];
    $tab4 = $tab[0]['img_url']; ?>
<script language='Javascript'>
    window.onload = init;
    function init() {
        var
            prod1 = document.getElementById["prod1111"];
        var
            prod1n = document.getElementById["prod1n"];
        var
            prod1q = document.getElementById['prod1q'];
        var
            prod1p = document.getElementById['prod1p'];
        var tab4 = '<?php echo $tab4 ?>';
        var tab1 = '<?php echo $tab1 ?>';
        var tab2 = '<?php echo $tab2 ?>';
        var tab3 = '<?php echo $tab3 ?>';
        prod1.src = tab4;
        prod1n.setAttribute('src', '#');
        prod1n.innerHTML = tab1;
        prod1q.innerHTML = tab2;
        prod1p.innerHTML = tab3;
    }
</script>
<?php }
?>

Solution:

instead of:

getElementById['prod1p'];

you should use:

getElementById('prod1p');

[] is for array access

() is for function call, and getElementById is a funcion