To contextualize: The code is a page with some RadioBox where each one must have a function and each one show different HTML elements depending on the need (this worked perfectly). The problem is that in ready() function the code does not work after else (line 6). (I tested only the first part of the separate if and also only the part after the else and both worked as they should, the problem is when they are like in the code).
HTML code:
<!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>
JavaScript code:
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");
}
}
}