What could be the reason for my code not functioning properly? How can I enable a button once a checkbox is selected? Also, is there a way to dynamically move text from a checkbox to the rezBlock_1 block?
CODPEN https://codepen.io/RJDio/pen/RwPgaaZ
document.addEventListener("DOMContentLoaded", () => {
let radioBtn = document.querySelectorAll('.radioBtn');
let activeBtn = document.querySelector('.activeBtn');
let formRadio = document.querySelector('.formRadio');
let rezBlock_1 = document.querySelector('.rezBlock_1');
function checkRadio(){
for(let i =0; i < radioBtn.length; i++){
if(radioBtn[i].hasAttribute('checked')){
activeBtn.removeAttribute('disabled');
let radioValue = radioBtn[i].innerText();
rezBlock_1.innerText(radioValue);
}
}
}
checkRadio();
});.blockRez{
width: 200px;
height: 100px;
border:1px solid red;
}
#rezBlock_1 {
width: 150px;
height: 30px;
border:1px solid blue;
}<div class="block1">
<form class="formRadio" action="handler.php">
<p><b>Make your choose<b></p>
<p><input class="radioBtn" name="dzen" type="radio" value="red">Red</p>
<p><input class="radioBtn" name="dzen" type="radio" value="green">Green</p>
<p><input class="radioBtn" name="dzen" type="radio" value="blue">Blue</p>
<p><button class="activeBtn" disabled value="Choose">Choose</button></p>
</form>
</div>
<div class="blockRez">
<div id="rezBlock_1"></div>
</div>