I am using this:

var title = $('#input').val();
$('#titleset').click(function (){
    $('#title').html('<h1>' + title + '</h1>'); 
    alert(title);
});

to try to get the value of an input box and then when the user clicks the button #titleset, overwrite the value from the input box to the <h1> element that is already there. i have been able to get the click to overwrite the <h1> element, but there is nothing in the title variable to write into the element. so how could i return a string from the #input id and write it to the #title id which is an <h1> element

here is my html

<h1 id="title">This Title Changes To What You Want It To Be</h1>
<ul class="menu1">
    <li>menu one
        <ul>
            <li id='inputbox'><input type ="text" id="input"/></li>
            <li id="titleset1"><input type="button" value="set title" id="titleset"/></li>
        </ul>
    </li>
</ul>