Web Forms :: Elements Changes ID When Webpage Running

I am studying for the 70-562 exam with the microsoft book. The author wrote that the ID that you set in your designer will be your client ID, and also uses some examples like this found in the WebService chapter:

<asp:TextBox ID="TextBoxTemp" runat="server" />
<asp:Label ID="LabelResults" runat="server" Text="" />
<br />
<input id="Button1" type="button" value="Calculate" onclick="GetCelsius()" />

And the JS:

function GetCelsius() {
var val = document.getElementById("TextBoxTemp");
TempConversion.GetCelsius(val.value, FinishCallback);
}

The point is: the ID changes, so the val is always null. Is the book wrong or am I doing something wrong?