Почему у кнопки не удаляется атрибут Disabled и значение не передаёться из чекбокса в rezBlock_1?

Question

Почему мой код не срабатывает? При выборе любого из чекбоксов кнопка должна становиться активной, и текстовое значение из выбранного чекбокса должно динамически записываться внутрь блока rezBlock_1?

CODPEN https://codepen.io/RJDio/pen/RwPgaaZ

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].checked){
      activeBtn.disabled = false;
      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>

Answer 1

Вам необходимо отслеживать изменения в radio, чтобы динамически менять значения.
Вместо innerText для получения значения используйте value
Для присвоения значения используйте = вместо скобок.

    let radioBtn = document.querySelectorAll('.radioBtn');
    let activeBtn = document.querySelector('.activeBtn');
    let formRadio = document.querySelector('.formRadio');
    let rezBlock_1 = document.getElementById('rezBlock_1');

    function checkRadio(){
        for (let i = 0; i < radioBtn.length; i++) {
            radioBtn[i].onchange = function() {
                if (radioBtn[i].checked) {
                    activeBtn.disabled = false;
                    let radioValue = radioBtn[i].value;
                    rezBlock_1.innerText = radioValue;
                }
            }
        }
    }
    checkRadio();

    .blockRez{
        width: 200px;
        height: 100px;
        border:1px solid red;
    }
    #rezBlock_1 {
        width: 150px;
        height: 30px;
        border:1px solid blue;
    }

<span 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>

БЛОГ НА HUSL

Почему у кнопки не удаляется атрибут Disabled и значение не передаёться из чекбокса в rezBlock_1?

Ответы (1 шт):