CODEWITHSUNDEEP
javascripthtml
Harrison Reeves
Harrison Reeves

Reputation: 101

What's wrong with my JS code for a command prompt?

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.

Upvotes: 0

Views: 61

Answers (2)

Max
Max

Reputation: 660

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>

Upvotes: 2

Aniruddha Das
Aniruddha Das

Reputation: 21698

<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.

Upvotes: 1

Related Questions