CODEWITHSUNDEEP
javascripthtml
user3798473
user3798473

Reputation: 1

HTML Javascript converter program

I am trying to create a simple HTML program that will allow the user to input a number or word, then if the userInput matches what I have defined, it changes that input to something else, then outputs the new value on the screen.

Also looking for a button to reset the program (at any time to start over)

Any ideas?

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

Working better now with... but where does the reset go? How do I format the output? all noob questions 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>

Upvotes: 0

Views: 76

Answers (1)

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

Convert the function to the following.

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

You can also add the reset button. And remove the current text using 

document.getElementById("id").innerHTML = ""; // remove the inner html.

Upvotes: 3

Related Questions