CODEWITHSUNDEEP
javascripthtml
SpykeGGFC
SpykeGGFC

Reputation: 1

How do I make the text a user inputs convert to uppercase through a function?

I am currently working on a project for a introductory javascript and html class, and I am trying to figure out how to make it so that the text a user enters into a text box converts to all uppercase letters after clicking a button. Here is what I have so far (i know it is ugly but it just needs to work) , I am just having trouble figuring out my problem. :

<html>
<body>

<p> Enter any text into the field below and click "Convert" and it will make 
every letter Upper Case. </p>
<form>
  <input type="text" id="text" value="">
  <input type="button" value="Convert" onclick="thefunction()">

</form>
<p id="lowercase"></p>
<script>
  function thefunction(){
    var text = ("text");
    var conv = text.toUpperCase();

  document.getElementById("lowercase").innerHTML = conv;
  }
</script>

</body>
</html>

Upvotes: 0

Views: 195

Answers (1)

EGC
EGC

Reputation: 1789

Looks like you just need to replace var text = ("text"); with var text = document.getElementById('text').value;

The full working code:

<html>
<body>

<p> Enter any text into the field below and click "Convert" and it will make 
every letter Upper Case. </p>
<form>
  <input type="text" id="text" value="">
  <input type="button" value="Convert" onclick="thefunction()">

</form>
<p id="lowercase"></p>
<script>
  function thefunction(){
    var text = document.getElementById('text').value;
    var conv = text.toUpperCase();

  document.getElementById("lowercase").innerHTML = conv;
  }
</script>

</body>
</html>

I suspect what you were doing wrong was trying to use var text = document.getElementById('text') and then trying to change that to upper case.

If you attempt this, you're actually attempting to apply the function toUpperCase to a HTMLInputElement and you'll get a console error as a result.

You just need to apply the toUpperCase function to the string value held within the HTMLInputElement called text by accessing it's value with var text = document.getElementById('text').value;

Upvotes: 1

Related Questions