HTML Javascript转换程序

HTML Javascript converter program

本文关键字：程序 转换 Javascript HTML      更新时间：2023-09-26

我试图创建一个简单的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>

现在工作更好了…但重置的方向是什么呢?如何格式化输出?所有新手问题都是yes 

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

将函数转换为以下格式

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.
相关文章：