how to style a button after clicking another button? - html

Question

I am trying to change button 2 to finger pointer after clicking button 1
so i am wondering is there a way to do it if there is please tell me what code do i write
Note:button 1 is already a finger pointer i want button 2 to be a finger pointer after clicking button 1
this is my code:
<input type="button" id="button1" type="submit" style="cursor: pointer; background-color:black;height: 45px; width: 150px; color:red;border-radius:10px;"value="first button" onclick="enableButton2()" />
<input type="button" id="button2" style="background-color:yellow; height: 45px;width: 225px;color:red;border-radius:10px;"value="second button" disabled />

Answer 1

use it :
<script>
function enableButton2(){
var btn2 = document.getElementById('button2');
btn2.setAttribute('disabled', false)
btn2.style.cursor = 'pointer'
}
</script>
<input type="button" id="button1" type="submit" style="cursor: pointer; background-color:black;height: 45px; width: 150px; color:red;border-radius:10px;" value="first button" onclick="enableButton2()" />
<input type="button" id="button2" style="background-color:yellow; height: 45px;width: 225px;color:red;border-radius:10px;" value="second button" disabled="true" />

Answer 2

this way:
the css style you are looking for is cursor : not-allowed;
const bt_1 = document.getElementById('button1')
, bt_2 = document.getElementById('button2')
;
bt_1.onclick = () =>
{
bt_2.disabled = false
}
button {
cursor : pointer;
height : 45px;
border-radius : 10px;
color : red;
}
button[disabled] {
cursor : not-allowed;
pointer-events : none;
color : #c0c0c0;
background-color : #ffffff !important;
}
#button1 {
background-color : black;
width : 150px;
}
#button2 {
background-color : yellow;
width : 225px;
}
<button id="button1" type="submit" > first button </button>
<button id="button2" disabled > second button </button>