Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Sending POST within HTML body

dannlea

New Coder
Hey everyone,

I'm working with a desktop music player that has an API allowing for remote control of the player.
I'm trying to create a website that has basic controls for the player... pause, play, skip, and maybe a button for full volume / background music volume.

The API documentation calls for the following, for example:

Code:
POST http://localhost:9863/query

"command": String,
"value": String (optional)

track-play - Play music

I've tried the following code, but I'm getting no response and the console isn't logging anything either:

Code:
<html>
<script>
    document.getElementById("play").addEventListener('click', async _ => {
        try {     
            const response = await fetch('http://localhost:9863/query', {
            method: 'post',
            command: 'track-play'
            });
            console.log('Completed!', response);
        } catch(err) {
            console.error(`Error: ${err}`);
        }
    });
</script>
<body>
    <p>play your track</p>
    <button id="play">Play</button>
    <div id="update"></div>
</body>

</html>

Sorry if this is super simple, I've been out of JS for a super long time and I don't really remember how to work with it :)
 
Are you sure the console isn't logging anything ? You may want to double-check that. When I copy your code I get this error in the console:

a.jpg

That explains why your event handler is not being created (and therefore you see none of the console.log messages whereas you should always see one of the two).

Now think about why this happens. The browser is executing this script code before the DOM is even being created ! So there is no button as yet. Move the <script> block after the <html> block, that makes it work. Or alternatively (better, IMO) put it in a function that you call from the <body>'s onLoad event handler.

Note that in your code, although it's not relevant to the error, the <script>...</script>block should be inside a <head>...</head> block. Browsers are lenient (lax, if you will) about errors like this, but a HTML validator would have flagged this.
 
Last edited by a moderator:
Are you sure the console isn't logging anything ? You may want to double-check that. When I copy your code I get this error in the console:

View attachment 1663

That explains why your event handler is not being created (and therefore you see none of the console.log messages whereas you should always see one of the two).

Now think about why this happens. The browser is executing this script code before the DOM is even being created ! So there is no button as yet. Move the <script> block after the <html> block, that makes it work. Or alternatively (better, IMO) put it in a function that you call from the <body>'s onLoad event handler.

Note that in your code, although it's not relevant to the error, the <script>...</script>block should be inside a <head>...</head> block. Browsers are lenient (lax, if you will) about errors like this, but a HTML validator would have flagged this.
Thank you! I'm still not able to get through to the API for some reason but it's at least logging that on the script side, the script is succeeding. Thank you :)
 
Have you looked at the Network tab of your debugger ? Might give you a clue to what is (or isn't) happening.
Idk what process is running on the localhost port 9863 (QuickTime Streaming Server maybe ?) but you may want to check if that process is running and if so, if it's doing any logging.
 
Last edited by a moderator:

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom