getJSON div change works in console but not in webpage

Question

So here's my problem. I'm trying to pull a specific element out of a webpage, and display that information in a product div. This is the code I am using currently.

<div id="heres">fd</div>

---

$.getJSON("https://productinfo.com/api/product", function (el) {
    document.getElementById("heres").innerHTML = "Product price: " + el.price;
});

And this works fine in the console(div changes in about a second after code is run), but I simply cannot get it to work in the webpages code. What's going on there? I'm not a terribly good coder but I think the code is pretty solid, so I'm confused. Any help is appreciated! :)

Answer 1

Try this:

  $(document).ready(function() { 
     $.getJSON("https://productinfo.com/api/product", function (el) { document.getElementById("heres").innerHTML = "Product price: " + el.price; 
  }); 
 });