How can I make my HTML command box work with JavaScript?

Question

I have an HTML command box that's supposed to execute commands e.g. change stylesheet and stuff like that. I thought I worked some magic, but it doesn't work at all. Here's the HTML with the JS and CSS in it. Feel free to make suggestions or if you think you have an idea.

function checkCommand() {
  var tempStyle = document.getElementById('temp-style')
  var commandInput = document.getElementById('text-box')

  if (commandInput.value == black) {
    tempStyle.setAttribute("href", "black.css")
  }

  if (commandInput.value == orange) {
    tempStyle.setAttribute("href", "orange.css")
  }

  if (commandInput.value == white) {
    tempStyle.setAttribute("href", "white.css")
  }

  if (commandInput.value == windows) {
    tempStyle.setAttribute("href", "windows.css")
  }
}

#text-box {
  font-size: 18px;
  width: 500px;
  height: 20px;
}

#submit-form {
  display: none;
}

<link rel="stylesheet" type="text/css" href="white.css" id="temp-style">
<form id="command-form">
  <input type="text" id="text-box" placeholder="Enter Command">
  <input type="submit" id="submit-form" onclick="checkCommand()">
</form>
<p><b>Black:</b> Background color changes to black and text color changes to white
  <br><b>Orange:</b> Background color changes to orange and text color changes to blue
  <br><b>White (Default):</b> Background color changes to white and text color changes to black
  <br>
  <br><b>Windows:</b> Background image changes to Windows XP Bliss and text color changes to black</p>

EDITS

Sidenote: How come when I apply only the HTML tag it looks great, but when the JS tag is in it tries to turn the whole thing into JS? Not too important, but I have OCD so it's kicking in hard.

Two problems I can see: first, your conditions should be checking strings. commandInput.value === "black" etc. And second, you're not cancelling the form's submit event so the page (appears to) just immediately reload. You should pass the event to the function and call event.preventDefault(); — Niet the Dark Absol
– Niet the Dark Absol, Commented Feb 17, 2020 at 1:43
@NiettheDarkAbsol How do I prevent the reload? do I add "onclick='event.preventDefault();'" to the form tag? Keep in mind, this might not matter, but I'm using the enter key, so I don't know if onclick works with it. — Harrison Reeves
– Harrison Reeves, Commented Feb 17, 2020 at 1:48
In the checkCommand function, do the event.preventDefault() (but make sure you pass in the event parameter). — Kurt
– Kurt, Commented Feb 17, 2020 at 1:50
@Kurt IT WORKED! I'M SO HAPPY BECAUSE THIS IS THE ONLY PROBLEM I'VE HAD ALL DAY AND NOW IT'S FIXED THANK YOU SO MUCH! — Harrison Reeves
– Harrison Reeves, Commented Feb 17, 2020 at 1:54

Harrison Reeves · Accepted Answer · 2020-02-17 02:43:23Z

I needed to add an extra "=" sign to every if condition because I was referring to a string, and I needed to put the string in quotes. After I submitted the form, it refreshed the page, so no content was saved. The fix for that was simply adding "event.preventDefault();" to the end of the checkCommand(); function. Here is the final JavaScript product. Everything else worked great.

JavaScript

function checkCommand() {
    var tempStyle = document.getElementById('temp-style')
    var commandInput = document.getElementById('text-box')

    if ( commandInput.value === "black" ) {
        tempStyle.setAttribute("href", "black.css")
    }

    if ( commandInput.value === "orange" ) {
        tempStyle.setAttribute("href", "orange.css")
    }

    if ( commandInput.value === "white" ) {
        tempStyle.setAttribute("href", "white.css")
    }

    if ( commandInput.value === "windows" ) {
        tempStyle.setAttribute("href", "windows.css")
    }

    form.reset();

    event.preventDefault();
}

Edits

I also added "form.reset();" before "event.preventDefault();" so it clears the form as you press enter.

Collectives™ on Stack Overflow

How can I make my HTML command box work with JavaScript?

EDITS

1 Answer 1

JavaScript

Edits

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDITS

1 Answer 1

JavaScript

Edits

Comments

Your Answer

Sign up or log in

Post as a guest

Related