如何使HTML命令框与JavaScript一起使用？

Question

我有一个HTML命令框，可以执行命令，例如更改样式表之类的东西。我以为我做了一些魔术，但是根本没有用。这是其中包含JS和CSS的HTML。随时提出建议或认为自己有想法。

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>

---

编辑

旁注：当我仅应用HTML标记时，看起来很棒，但是当JS标记插入其中时，它试图将整个内容转换为JS的原因是什么？不太重要，但是我有OCD，所以很难使用。

Answer 1

我需要为每个if条件添加一个额外的“ =”符号，因为我是在指一个字符串，并且需要将该字符串放在引号中。提交表单后，它刷新了页面，因此没有内容被保存。解决方法是简单地添加“ event.preventDefault（）;”。到checkCommand（）的末尾；功能。这是最终的JavaScript产品。其他一切都很好。

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();
}

编辑

我还添加了“ form.reset（）;”在“ event.preventDefault（）;”之前因此当您按Enter键时，它将清除表单。