HTML onclick function doesn't work

Question

I am wondering why my onclick function doesn't work in this particular case. My function is a pretty straightforward alert:

function confirmEditProduct(editProductID){
      alert("Worked");
  }

This is my HTML code echoed in PHP:

    echo "
      <img src='$directory/$productImage' width='200px;'></img><br><br>
      <p>Product Name: <p><input type='text' id='editName' name='editName' style='width:400px;' value='$productName'/>
      <p>Category:
          <select class='form-control' id='editCat' style='width:200px;' disabled>
            <option value='Cacti'"; if ($productCategory == '1') echo " selected='selected'"; echo ">Cacti</option>
            <option value='Succulents'"; if ($productCategory == '2') echo " selected='selected'"; echo ">Succulents</option>
          </select>

      <p>Description: <p><textarea rows='4' cols='50' id='editDesc' name='editDesc'>$productDesc</textarea>
      <p>Price: <input type='text' id='editPrice' name='editPrice' value='$productPrice'/>
      <p>Image: <input class='input-group' type='file' id='editImage' name='editImage' accept='image/*' />
      <p>Stock: <input type='text' id='editStock' name='editStock' value='$productStock'/>
      <p>
      <input type='button' class='btn btn-success' id='$productID' onClick='confirmEditProduct($productID);' value='Edit Product' />


  ";

This snippet is part of a modal btw.

Thank you to everyone who can help me out

Answer 1

This seems like it would be quite simple. Are you also echoing the Javascript? If so, take an extra precaution and move it before the HTML code. Some other things you may want to consider include making the input button into a straight up button and omitting the semicolon at the end of the onclick attribute. As for styling, you may want to put the value attribute after the type attribute. Hope this helps!

Edit: When I mean echoing the Javascript, make sure you have a <script src="main.js"> or the entire script within your echoed code.