Tengo un sitio web con 2 páginas. En la primera página (página de destino), tengo este elemento en el que se puede hacer clic:
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" id="arrest-data" onclick="changeDisp()> <div class="box-part text-center"> <i class="fa-solid fa-3x fa-handcuffs" aria-hidden="true"></i> <div class="title"> <h3>Arrest Data</h3> </div> <div class="text"> <span>Crime data and other crime statistics</span> </div> <a href="#" class="get-data">GET DATA</a> </div>Quiero cambiar el valor de una variable global cuando se hace clic en ese elemento en el que se puede hacer clic:
var disp = 0; function changeDisp(){ disp = 120 console.log(disp) } Entonces esto funciona e imprime 120 .
El problema es que el valor de disp no cambia globalmente. Por ejemplo, en la segunda página, hay otro menú desplegable:
<div class="container"> <div class="row dropdowns"> <div class="col-4"> <select id="categoryDropdown"> <option value="All">All Topics</option> <option value="Category: Arrest Data">Arrest Data</option> <option value="Category: Use of Force">Use of Force</option> <option value="Category: Human Trafficking">Human Trafficking</option> <option value="Category: Treatment and Diversion">Treatment and Diversion</option> <option value="Category: Drug and Overdose Data">Drug and Overdose Data</option> </select> </div>Y cuando pruebo para ver si la variable global ahora es 120 con esta función:
$('.container').on("change", 'select', function() { console.log(disp) });Todavía imprime 0!
¿Qué estoy haciendo mal aquí? Quiero que el valor cambie globalmente con el evento al hacer clic, y no parece estar haciendo eso.
Si desea leer y usar valores entre páginas separadas, puede usar algo como localStorage para almacenar sus valores y luego leerlos cuando sea necesario.
Ref: Window.localStorage
Vea la implementación a continuación:
// Setter function function setDisp(value) { if (!isNaN(value)) { localStorage.setItem('disp', Number(value)); } } // Getter function function getDisp(defaultValue = 0) { let localStorageValue = localStorage.getItem('disp'); return !!localStorageValue ? Number(localStorageValue) : defaultValue; } let dispBeforeChange = getDisp(); console.log(`dispBeforeChange = ${dispBeforeChange}`); // Changing the value of 'disp' to 120 setDisp(120) let dispAfterChange = getDisp(); console.log(`dispAfterChange = ${dispAfterChange}`);