Unable to insert text into HTML from input field using jQuery

I am new to programming and I have been trying to write a script using jQuery that will take the value from an input field, and insert it into a paragraph once the button has been clicked.

Here is my HTML:

    <form>
      <div class="form-group">
        <label for="lowercase">lowercase</label>
        <input id="lowercase" class="form-control" type="text" placeholder="type in lowercase">
      </div>
      <button type="submit" id="button" class="btn">Convert Text to Uppercase</button>  
    </form>
  </div>
  <div id="uppercasetext">
    <h3>UPPERCASE</h3>
    <p id="convertedtext"></p>
  </div>    

And here is the jQuery that I wrote:

$((function() {
 $("#button").onClick(function(){
     ("#convertedtext").val($("#lowercase").val());
 });
});

What am I doing wrong? Thanks in advance