Solution 1 :

It works:

function checkCommand(event) {
	event.preventDefault();

    var commandInput = document.getElementById("command-box");
    var form = document.getElementById("command-form");

    if ( commandInput.value === "help" ) {
        window.open("html/commandhelp.html");
    }
    if ( commandInput.value === "windows" ) {
        changeStyle('css/windows-xp.css');
    }
    if ( commandInput.value === "explicit pass:3XPL1C1T" ) {
        changeStyle('css/explicit.css');
        playMusic('other/audio/moaning.mp3');
    }

    form.reset();
}
<form id="command-form" onsubmit="return checkCommand(event)" autocomplete="off">
    <img src="img/tint.png" alt="tint-img" id="tint-img" class="CMP">
    <input type="text" placeholder="Enter Command" class="CMP" id="command-box">
    <img id="x-icon" src="img/x-icon.png" alt="x-icon" class="goto-command-console bottom-left-navigation-item" onclick="toggleCMP();">
    <button type="submit">Send me</button>
</form>

Solution 2 :

<input type="submit" style="display: none;" onclick="checkCommand();"> will submit the form on enter as its type is submit even you set to display: none;.

Changing its type to a button will solve your problem but you have to click the button to make it work or you have to handle the enter key (return key ) event to make call to the checkCommand(event)

<input type="button" onclick="checkCommand();">

The answer by @max is also a good one as it handles the event, but you have to understand a lot how that function is getting called with the event.

Problem :

This was working earlier, and then stopped. No idea why. It should function like this: enter a command into the textbox that is matched with an if statement, and execute the command. The form keeps refreshing after you press enter, so I don’t think the “event.preventDefault();” at the end of my JS code is working.

HTML

<form id="command-form" autocomplete="off">
    <img src="img/tint.png" alt="tint-img" id="tint-img" class="CMP">
    <input type="text" placeholder="Enter Command" class="CMP" id="command-box">
    <img id="x-icon" src="img/x-icon.png" alt="x-icon" class="goto-command-console bottom-left-navigation-item" onclick="toggleCMP();">
    <input type="submit" style="display: none;" onclick="checkCommand();">
</form>

JavaScript

function checkCommand() {
    var commandInput = document.getElementById("command-box");
    var form = document.getElementById("command-form");

    if ( commandInput.value === "help" ) {
        window.open("html/commandhelp.html");
    }
    if ( commandInput.value === "windows" ) {
        changeStyle('css/windows-xp.css');
    }
    if ( commandInput.value === "explicit pass:3XPL1C1T" ) {
        changeStyle('css/explicit.css');
        playMusic('other/audio/moaning.mp3');
    }

    form.reset();
    event.preventDefault();
}

Edits

A nice gentleman in the comments solved the problem, go check out his answer below. However, my method works too. In an earlier function, I did this:

function playMusic(url-to-mp3) {
    new Audio(url-to-mp3).play();
}

I wasn’t even thinking about the dashes in the function object. Both methods work great, and thank you for your help. Sorry for wasting your time.

Comments

Comment posted by Pointy

Your “submit” input is not visible; are you trying to use it to handle hitting the “Enter” key from the text input?

Comment posted by tymeJV

You also never pass in

Comment posted by Keith

@tymeJV HTML5 doesn’t use closing tags for

Comment posted by Max

yeah, updated it a bit. And added onsubmit event to be able handle it when Enter is pressed

Comment posted by Harrison Reeves

I looked over where I put it in, and I put it on the wrong input lol. Accepted answer, thank you for your time.

Comment posted by Max

Np, always check console 🙂

Comment posted by Harrison Reeves

I was an idiot and didn’t even think to check the JS console for errors. Turns out, my method works. In an earlier function, I did “function playMusic(url-to-music) {” not even thinking about the dashes in the function object name. Thanks for helping!

By