Para contextualizar: O código é uma página com algumas RadioBox
onde cada uma deve ter uma função e cada uma mostrar elementos HTML diferentes dependendo da necessidade (isso funcionou perfeitamente). O problema é que na função ready()
o código não funciona depois do else
(linha 6). (Eu testei só a primeira parte do if separado e também só a parte depois do else e ambas funcionaram como deveriam, o problema é quando estão como no código).
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=devide-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="css/bootswatch.min.css" rel="stylesheet" media="all">
<link href="icomoon/style.css" rel="stylesheet" media="all">
<link href="css/style.css" rel="stylesheet" media="all">
</head>
<body onload="rFunction()">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html"><img src="imgs/jslogo.png" class="img100"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="ex1.html">Exercício 1</a></li>
<li><a href="#">Exercício 2</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<form class="form-horizontal">
<fieldset>
<legend>Escolha uma opção:</legend>
<div class="form-group" id="form01">
<label class="col-xs-2 control-label">Opções:</label>
<div class="col-xs-10">
<div class="radio">
<label>
<input name="optionsRadios" id="optionsRadios1" value="sqrt" checked="true" type="radio" onchange="rFunction()">
Calcular a raiz quadrada de um número.
</label>
</div>
<div class="radio">
<label>
<input name="optionsRadios" id="optionsRadios2" value="bigger" type="radio" onchange="rFunction2()">
Informar dois números e mostrar o maior número.
</label>
</div>
<div class="radio">
<label>
<input name="optionsRadios" id="optionsRadios3" value="exp" type="radio" onchange="rFunction3()">
Informar a base e o expoente e elevar ao expoente informado.
</label>
</div>
<div class="radio">
<label>
<input name="optionsRadios" id="optionsRadios4" value="sum" type="radio" onchange="rFunction4()">
Informar dois números e mostrar o resultado da soma.
</label>
</div>
<div class="radio">
<label>
<input name="optionsRadios" id="optionsRadios5" value="upcase" type="radio" onchange="rFunction5()">
Informar uma frase em letras minúsculas e mostrar a frase em letras maiúsculas.
</label>
</div>
<br>
</div>
</div>
<button type="submit" class="btn btn-primary" onclick="ready()">Pronto!</button>
</fieldset>
</form><br>
</div>
<script src="js/jquery-3.2.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Código JavaScript:
function rFunction(){
if($("#optionsRadios1").value = true){
if($(".crClass")){
$("div").remove(".crClass");
}
var div = document.createElement('div');
div.className = 'crClass';
div.id = 'option1';
var lbl = document.createElement('label');
lbl.className = 'col-xs-2 control-label';
div.appendChild(lbl);
var txt = document.createTextNode("Digite um número:");
lbl.appendChild(txt);
var txtA = document.createElement('input');
txtA.setAttribute("type","number");
txtA.className = 'col-xs-2';
txtA.id = 'txtA1';
div.appendChild(txtA);
document.getElementById('form01').appendChild(div);
}
}
function rFunction2(){
if($("#optionsRadios2").value = true){
if($(".crClass")){
$("div").remove(".crClass");
}
var div = document.createElement('div');
div.className = 'crClass';
div.id = 'option2';
var lbl = document.createElement('label');
lbl.className = 'col-xs-2 control-label';
div.appendChild(lbl);
var txt = document.createTextNode("Digite um número:");
lbl.appendChild(txt);
var txtA = document.createElement('input');
txtA.setAttribute("type","number");
txtA.className = 'col-xs-2';
txtA.id = 'txtA2';
div.appendChild(txtA);
document.getElementById('form01').appendChild(div);
var div0 = document.createElement('div');
div0.className = 'crClass';
div0.id = 'option3';
var lbl0 = document.createElement('label');
lbl0.className = 'col-xs-2 control-label';
div0.appendChild(lbl0);
var txt0 = document.createTextNode("Digite outro número:");
lbl0.appendChild(txt0);
var txtA0 = document.createElement('input');
txtA0.setAttribute("type","number");
txtA0.className = 'col-xs-2';
txtA0.id = 'txtA3';
div0.appendChild(txtA0);
document.getElementById('form01').appendChild(div0);
}
}
function ready(){
if($("#option1")){
var number = document.getElementById("txtA1").value;
var result = Math.sqrt(number);
alert('Resultado: ' + result);
} else if($("#option2") && $("#option3")){
var n1 = document.getElementById("txtA2").value;
var n2 = document.getElementById("txtA3").value;
if(n1>n2){
alert(n1);
} else if(n2>n1){
alert(n2);
} else{
alert("Igual");
}
}
}