HTML Javascript转换程序

时间:2014-07-02 16:13:16

标签: javascript html

我正在尝试创建一个简单的HTML程序,允许用户输入数字或单词,然后如果userInput与我定义的匹配,它会将输入更改为其他内容,然后输出新的屏幕上的值。

还要找一个按钮来重置程序(随时重启)

有什么想法吗?

<!DOCTYPE html>
<html>
<body>
  <h1>Value Converter</h1>

  <input type="text" id="userInput"=>Enter the Value</input>
  <button onclick="test()">Submit</button>
  <script>
    function test() {
      var userInput = document.getElementById("userInput").value;

      //Need to add If, else if, else to change the value of userInput
      // for example, If xxxx value, set to yyyy, then output yyyy 

      document.write(userInput);
    }           
    // Need to add a "reset" to go back to restart the program

    </script>
</body>
</html>    

现在用更好的工作......但重置在哪里?如何格式化输出?所有noob问题是的

<!DOCTYPE html>
<html>
<body>
<h1>Value Converter</h1>

<input type="text" id="userInput"=>Enter the Value</input>
    <button onclick="test()">Submit</button>
    <script>
        function test()
            {
   var userInput = document.getElementById("userInput").value;
   if(userInput == "xxxx") {
      userInput="yyyy";
   }
   else if(userInput == "yyyy") {
      userInput="zzzz";
   }
   else {
      userInput="Not Found";
   }
        document.write(userInput);  
            }

            // Need to add a "reset" to go back to restart the program

    </script>
</body>
</html> 

1 个答案:

答案 0 :(得分:3)

将功能转换为以下内容。

function test()
{
   var userInput = document.getElementById("userInput").value;
   if(userInput == "xxxx") {
      // I forgot the updating part here. 
      document.getElementById("otherIdToWriteOutput").innerHTML = "yyyy";
   }
}

您还可以添加重置按钮。并使用

删除当前文本
document.getElementById("id").innerHTML = ""; // remove the inner html.