Как сделать кнопку активной после выбора одного из флажков? А как динамически перенести значение из флажка в блок rezBlock_1? - PullRequest
1 голос
/ 29 февраля 2020

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

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>

1 Ответ

1 голос
/ 29 февраля 2020

Вы можете добавить eventListener для события click. Для повторной активации кнопки установите для disabled значение false.

document.addEventListener("DOMContentLoaded", () => {
    let inputs = document.querySelectorAll(".radioBtn");
    inputs.forEach(input => input.addEventListener("click", () => {document.querySelector('.activeBtn').disabled = false;}))
    
});
.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...