Change color of div when button on another page is clicked
Question
hope you can help me, i have a page named "diagnosticoST", with 4 buttons (btn-institucional, btn-economico, btn-social, btn-natural) those are with background colors before the survey inside them is completed, and when the user completes the survey (example page) "Quadrant_1" and click the Continue button it returns to the "diagnosticoST" page and has to change the color of the button that was clicked, i cant figure how to storage the clicked button function so that when i return to the first page it changes the color of the button (i cant do it by css because the trigger for the color change has to be the continue button)
Here is the code im using but its not working Please help me :(
<!---QUADRANT_1 PAGE -->
<html>
<button class="quadrant_1">Continue</button>
</html>
<script>
$(".quadrant_1").on("click",function(){
localStorage.setItem('quadrant_1', 'clicked');
window.location.href = "diagnosticoST.html";
});
</script>
<!---DIAGNOSTICOST PAGE -->
<div class="row">
<a href="quadrant_1.html">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color:#003E8B; cursor: pointer;" id="btn-institucional">
<p>1</p>
<img src="icons/institucional.png" width= "50%">
<p>Desarrollo Institucional para un Buen Gobierno</p>
</div>
</a>
</div>
<script>
if(localStorage.getItem('quadrant_1') === 'clicked'){
$("btn-institucional").css({backgroundColor: "red"});
}
</script>
2 answers
solution1
0 2018-03-26 00:26:10
It looks like the element you want to select is this one:
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color:#003E8B; cursor: pointer;" id="btn-institucional">
Its ID is btn-institucional . To select an ID, put # in front of the selector string:
$("#btn-institucional").css({backgroundColor: "red"});
(your $("btn-institucional") searches for an element whose tag name is btn-institucional , which of course doesn't exist)
If you're trying to communicate between one page and another like that, I'd suggest ditching localStorage and using window.open instead, something like this:
const w = window.open('https:// ... surveyToComplete.html');
w.document.addEventListener("DOMContentLoaded", (event) => {
document.querySelector('#submitSurveyButton').addEventListener('click', () => {
$("btn-institucional").css({backgroundColor: "red"});
});
});
solution2
0 2018-03-26 00:57:02
clear your local storage on your first page.
$( document ).ready(function() {
localStorage.clear();
$(".quadrant_1").on("click",function(){
localStorage.setItem('quadrant_1', 'clicked');
window.location.href = "index2.html";
});
if(localStorage.getItem('quadrant_1') === 'clicked'){
$("#btn-institucional").css({backgroundColor: "red"});
}
}
)
here is a plunkr.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.