Setting value of input with jquery

Question

I'm having problem trying to set the value for an input using jquery, basically you click on a link, and it takes you to a different page with a form, and I'm trying to set the value of one of the inputs of that form. I don't know why is not working. Here's my code:

page 1 (where you click the link that performs the function to set the value of the input)

<table class="tablaObjeto">
 <tbody>
 <tr>
 <td>
 <img src="img/ps4Mall.jpg">
 </td>
 </tr>
 <tr>
 <td class="precio">
 <p>$<span id="precioPS4">400</span> - PS4</p>
 </td>
 </tr>
 <tr>
 <td class="botonCompra">
 <a id="botonCompraPS4" href="paginaSolicitudes.html"><img src="img/BotonCompra.png"></a>
 </td>
 </tr>
 </tbody>
</table>

page 2 (form with the input that needs to show the value)

<tr>
 <td class="info">Precio: </td>
 <td class="inputs"><input id="precioI" name="precio" type="text" value=""></td>
</tr>

Here's the javascript (javascript/metodos.js)

$(document).ready(function() {
 $("#botonCompraPS4").click(function() {
 obtienePrecioPS4();
 $("#precioI").val(retornaPrecio());
 });
});
function obtienePrecioPS4() {
 sessionStorage.setItem("precio", $("#precioPS4").text());
}
function retornaPrecio() {
 var r = sessionStorage.getItem("precio");
 return r;
}

Answer 1

try loading the value on document ready, see below

$(document).ready(function() {
 $("#botonCompraPS4").click(function() {
 obtienePrecioPS4();
 });
 // Load value on document ready
 $("#precioI").val(retornaPrecio());
});

Your page1 and page2 should have the same javascript code above