Choose role and status

by borisjavier

HTML

<div id="answer"></div>
<div id="myInput"></div>
<select name="rol" id="rol" class="form-control">
<option value="1" selected>Administrador da plataforma</option><option value="2">Gerente da fábrica</option><option value="3">Armazenista</option>
</select>

<input type="radio" id="rejeitado" class=radio1 name="toggle3" value="rejeitado"/>
<input type="radio" id="pendente" class=radio2 name="toggle3" value="pendente" checked/>
<input type="radio" id="ativo" class=radio3 name="toggle3" value="ativo" />
<div class="content1">
    <p id="status"></p>
  </div>

CSS

#myInput{
   font-size: 30px;
   color: red;
   font-weight: bold;
}

#answer{
   font-size: 30px;
   color: blue;
   font-weight: bold;
}

JavaScript

const rol = document.getElementById("rol");

const status = document.getElementById("status");


const chk = document.querySelector('input[name="toggle3"]:checked').value
if (chk != '') {
	document.querySelectorAll('input[name="toggle3"]').forEach((elem) => {
  	elem.addEventListener("click", function(event) {
    	 var item = event.target.value;
     
   if(confirmBox = confirm("Tem certeza de que deseja alterar o status?")) {
   	status.innerHTML = item.charAt(0).toUpperCase() + item.slice(1); 
   }
   else {
   	status.innerHTML = chk.charAt(0).toUpperCase() + chk.slice(1);
   document.getElementById(chk).checked = true;
   } 
    });
  });
}

rol.addEventListener("change", function() {
       addDescription(); 
});

function addDescription() {
   switch (rol.value) {
   case "1": status.innerHTML = `Poderá gerenciar:Empresa, Fábricas, Matérias-primas, Produto acabado, Processo`; break;
   case "2": status.innerHTML = `Poderá gerenciar: Fábricas, Matérias-primas, Produto acabado, Processo`;break;
   case "3": status.innerHTML = `Poderá gerenciar: Matérias-primas, Produto acabado, Processo`;break;
   }      
}