Develop Reference

Avoid change color button when refresh page

I already try and it's work to change permanent even when refreshing page but why another button can't change color when clicked?
and how to change name from "Processed" to "Finish" when clicked?
I have code like this
<button id="diproses" class="Button change">Processed</button>
<script>
$(document).ready(function() {
if (localStorage.getItem('isCliked')) {
$('#diproses').css('background-color', 'green');
}
$('#diproses').on('click', function() {
$('#diproses').css('background-color', 'green');
// set the value upon clicking
localStorage.setItem('isCliked', true)
});
});
</script>

enable or disable a button on another page

How would I be able to click a button on one page, that will enable another button on another page?
my javascript
function enableButton2() {
document.getElementById("button2").disabled = false;
document.getElementById("divbutton").hidden = false;
}
HTML
<input type="button" id="button1" value="button 1" onclick="enableButton2()"/>
<div id="divbutton" hidden>
<input onclick="window.location.href='menu.html'" type="button" id="button2" value="button 2" disabled />
</div>
this code works but will only work if both these buttons are on the same page, what I'm trying to do is separate them into their own pages but still work as intended, that is clicking the first button will make the second button appear.
Thanks in advance!

localStorage would be an efficient approach if you also want to save the user's button choice. localStorage allows you to store a value in the same origin, which means you just have to check whether the value was changed and differentiate which button should be enabled.
For example,
function enableButton2() {
localStorage.enabledButton = '2'
}
Then to check which button to enable, which would be used in the second page
setInterval(() => {
if (localStorage.enabledButton == "1") {
//Enable button 1
}
if (localStorage.enabledButton == "2") {
//Enable button 2
}
})

You can use Broadcast Channel API to communicate between different tabs.
For example, declare the following on both pages:
const bc = new BroadcastChannel('button_disable');
bc.onmessage = function(event){
if(event.data == "hide"){
//hide the buttons
}else if(event.data == "show){
//show the buttons
}
}
Then, if you want to hide/show the button, simply dispatch a message:
bc.postMessage('hide');

Disable a button when the one button is pressed, enable after 5 seconds

I have 2 button that load some data, each button take some time to load. so i want to disable the other button for like 10 seconds or until the other button finish rendering.
when one button is clicked, the other button should be disabled for 5 seconds and reenabled after that. how can i do that?
$(function() {
var clicked = false;
var first = $('#but1');
var second = $('#but2');
first.on('click', function() {
clicked = !clicked;
if (clicked)
second.attr('disabled', 'enabled');
else
second.removeAttr('disabled');
});
second.on('click', function() {
clicked = !clicked;
if (clicked)
first.attr('disabled', 'enabled');
else
first.removeAttr('disabled');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="but1">but1</button>
<button id="but2">but2</button>

You can actually make it relative and avoid id's by grouping the buttons. Though, this is just academic. If you're actually waiting for data to load, you should wait until the data is loaded before enabling the button - which is easy enough if you show that code.
$(function() {
$('.toggles button').click(function() {
$('.toggles button').not(this).attr('disabled', 'disabled')
setTimeout(() => {
$('.toggles button').removeAttr('disabled');
}, 5000)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='toggles'>
<button id="but1"> button 1</button>
<button id="but2"> button 2</button>
</div>

Consider the following example.
$(function() {
var first = $('#but1');
var second = $('#but2');
first.click(function() {
if (!second.prop("disabled")) {
second.prop('disabled', true);
setTimeout(function() {
second.prop("disabled", false);
}, (10 * 1000));
}
});
second.click(function() {
if (!first.prop("disabled")) {
first.prop('disabled', true);
setTimeout(function() {
first.prop("disabled", false);
}, (10 * 1000));
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="but1">but1</button>
<button id="but2">but2</button>
You want to use .prop() to manage element properties such as disabled. Please see: https://api.jquery.com/prop/
You can also use setTimeout() to execute a code snippet after a specific amount of time has passed. See more: https://www.w3schools.com/jsref/met_win_settimeout.asp

JavaScript do something if one of four buttons is pressed

So, I'm working on a JavaScript project and now I need to find a way, how it can do the if commands, if I press one of four buttons. The code looks basically like this:
i=1
if(i==1){
[[...]]
$("#button1").click(function() {
i++
}
}
if(i==2) {
[[..]]
}
I thought JavaScript would check the if(i==2), see, that i is 2 and do the actions, but it doesnt...

You may use switch case with different button onClick. And call different function from there.
$('button').on('click', function () {
var i = 0;
switch ($(this).attr('id')) {
case "btn1": i+=1; break;
case "btn2": i+=2; break;
case "btn3": i+=3; break;
case "btn4": i+=4; break;
}
console.log(i);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn1">1</button>
<button id="btn2">2</button>
<button id="btn3">3</button>
<button id="btn4">4</button>

This solution uses jquery (I noticed you are already using it).
You need to be able to uniquely identify individual buttons, if you add an attribute to each with an index then this is possible.
Once you have this unique identifying attribute you can create click events for individual buttons with the line: $("button[btn-ind='2']").click( function() { ... });. Alternatively you can apply a general click event for any button and differentiate within that click event by checking the attribute (i.e. the value of $(this).attr("btn-ind").
Buttons 1 and 2 have their own click events in the code below.
Buttons 3 and 4 only have a a click event via the general button selector.
Let me know if this isn't what you wanted.
$("button[btn-ind='1'").click( function() {
console.log($(this).text() + " clicked");
});
$("button[btn-ind='2'").click( function() {
console.log($(this).text() + " clicked");
});
$("button").click( function() {
if ( $(this).attr("btn-ind") == "3" ) {
console.log($(this).text() + " clicked");
} else if ( $(this).attr("btn-ind") == "4") {
console.log($(this).text() + " clicked");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button btn-ind="1">Button 1</button>
<button btn-ind="2">Button 2</button>
<button btn-ind="3">Button 3</button>
<button btn-ind="4">Button 4</button>

I think you're getting wrong the underlying event pattern. You are trying to use simple procedural programming to distinguish the pressed button, but this doesn't even make sense.
You should attach a different event handler to each button and then simply do what that button is supposed to do:
<button type="button" id="button1">1</button>
<button type="button" id="button2">2</button>
<button type="button" id="button3">3</button>
<button type="button" id="button4">4</button>
<script>
$("#button1").on("click", () => {
// button 1 was pressed, do what you must
};
$("#button2").on("click", () => {
// button 2 was pressed, do what you must
};
$("#button3").on("click", () => {
// button 3 was pressed, do what you must
};
$("#button4").on("click", () => {
// button 4 was pressed, do what you must
};
</script>
A much smaller code footprint can be achieved by parameterizing the buttons through an HTML attribute such as data-*. Do not use arbitrary, invented attributes, they are not HTML5 compliant. Here I use data-command attributes to show that indices are not necessary:
<button type="button" data-command="start">1</button>
<button type="button" data-command="faster">2</button>
<button type="button" data-command="slower">3</button>
<button type="button" data-command="stop">4</button>
<script>
// attach event to all buttons with a data-command attribute
$("button[data-command]").on("click", () => {
// distinguish by data-command attribute
switch ($(this).data("command"))
{
case "start":
// perform the "start" action
break;
case "faster":
// perform the "faster" action
break;
case "slower":
// perform the "slower" action
break;
case "stop":
// perform the "stop" action
break;
default:
throw "unrecognized command (was \"" + $(this).data("command") + "\")";
}
};
</script>

Pressing two button in jquery will display this action

I'm basically creating a filter button.
If I press button1 {this will happen}
If press button2 {this will happen}
but if I press button1 and then button2 {this has to happen}
This is the code I have so far. Thanks!
$(document).ready(function() {
if($('#button1').click(function() && $('#button2').click(function()){
//perform actions
});

Here is the logic
button 1 handler {
set var to indicate click
do what you need
}
button 2 handler {
check var to see if button 1 is clicked
do whatever you need based on the var check
}
This only handles button 1 click followed by 2, but you get the idea and should be able to figure out if button 2 is clicked then 1

Try this using the data-attribute
$('#button1').click(function(){
alert('button one clicked');
$(this).data('lastClicked',true);
});
$('#button2').click(function(){
if(!!$('#button1').data('lastClicked')){
alert('Button 1 then button 2')
}else{
alert('button two clicked');
}
});
$("body > *").not("#button1").click(function(){
$('#button1').data('lastClicked',false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1">Button 1 </button>
<button id="button2"> Button 2</button>
<button id="button3"> Button 3</button>
As you would notice if there is any click that is not on #button1 then the next click will not be considered as button1 --> button2

$(document).ready(function() {
$('#button1').click(function(){
//perform regular button1 actions
var btn1clicked=true;
});
$('#button2').click(function(){
//perform regular button2 actions
if(btn1clicked){
//perform button2 clicked after button1 was clicked action
}
});
});
You need to set a variable after the first button is clicked. Then when the second button is clicked, you check if the variable is set and if it is, you perform the special action.

You could save the data about the clicking state using jQuery .data(), then use it in other handlers. Something like this:
$('.js-button-1').on('click', function() {
$(this).data('clicked', true);
$('.js-result').text('Button 1 is clicked');
});
$('.js-button-2').on('click', function() {
if ($('.js-button-1').data('clicked')) {
$('.js-result').text('Button 1 + Button 2 are clicked');
} else {
$('.js-result').text('Button 2 is clicked');
}
});
$('.js-button-clear').on('click', function() {
$('.js-button-1').data('clicked', false);
$('.js-result').text('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="js-button-1">Button 1</button>
<button class="js-button-2">Button 2</button>
<button class="js-button-clear">Clear</button>
<div>
<span>Result: </span>
<span class="js-result"></span>
</div>