CODEWITHSUNDEEP
javascripthtml
Harrison Reeves
Harrison Reeves

Reputation: 101

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

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.

Upvotes: 1

Views: 287

Answers (1)

Harrison Reeves
Harrison Reeves

Reputation: 101

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.

Upvotes: 1

Related Questions