xmlhttprequest,fetch() whatever works

I'be been pouring over stackoverflow for about a week now and I just can't find a solution to my problem. I've scoured youtube for tutorials and have about 8 books out from the library. So far, most, if not all sources have only vague explanations of what needs to be done.

I'm simply trying to pull ticker data from an API and display it on the screen. I've typed out examples from stackoverflow, dummies guides, SAMS, youtube tutorials.... nothing works. I'm aware of the same-origin policy but I'm not sure if its what is causing all the error. I click the button and nothing shows up. I turned off my security in Chrome and Firefox....still nothing.

Here's a simple script I copied out of Javascript for dummies. I've modified it to use the api I want and the api returns this data:

[
    {
        "id": "honey", 
        "name": "Honey", 
        "symbol": "HONEY", 
        "rank": "369", 
        "price_usd": "0.240062", 
        "price_btc": "0.00012133", 
        "24h_volume_usd": "652.439", 
        "market_cap_usd": "16398.0", 
        "available_supply": "68306.0", 
        "total_supply": "68306.0", 
        "percent_change_1h": "2.05", 
        "percent_change_24h": "-15.47", 
        "percent_change_7d": "-70.84", 
        "last_updated": "1495298087"
    }
]

I just want the price in USD to show up on my webpage.

I would appreciate any help, I usually prefer figuring things out for myself but I'm afraid I've been stumped on this for a week solid. This is just one example, I am completely open to ANY code that works. Here is my script:

<html>
    <head>
    <title>Displaying JSON Data</title>

        <script type="text/javascript"> 
        window.addEventListener('load',init,false);
        function init(e)P
        document.getElementbyId('mybutton').addEventListener('click',documentLoader,false);
        }
        function reqListener(){
        var obj = JSON.parse(this.responseText);

        document.getElementId('price_usd').innerHTML=obj.price_usd;
        }

        function documentLoader(){
        var oReq = new XMLHttpRequest();
        oReq.onload = reqListener; 
        oReq.open("GET", "https://api.coinmarketcap.com/v1/ticker/HONEY/?convert=USD",true); 
        oReq.send(); 
        }
        </script>

    </head>
<body>
    <form id="myForm">
        <button id="myButton" type="button">Click to load</button>
    </form> 
<h1>Honey Coin Price:</h1>
<div id="price_usd"></div>
</body> 
</html>

Solution

You have several typos, this seems to be working fine:

window.addEventListener('load',init,false);

function init(e) {
    document.getElementById('myButton').addEventListener('click',documentLoader,false);
}

function reqListener() {
    var obj = JSON.parse(this.responseText);
    document.getElementById('price_usd').innerHTML= obj[0].price_usd;
}

function documentLoader(){
    var oReq = new XMLHttpRequest();
    oReq.onload = reqListener; 
    oReq.open("GET", "https://api.coinmarketcap.com/v1/ticker/HONEY/?convert=USD",true); 
    oReq.send(); 
}