0
To contextualize: The code is a page with some RadioBox where each one must have a function and each show different HTML elements depending on the need (this worked perfectly). The problem is that in function ready() the code does not work after the else (line 6). (I tested only the first part of the separate if and also only the part after Else and both worked as they should, the problem is when they are as 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");
}
}
}
Can you elaborate on the problem? I couldn’t understand exactly what it is. What should be executed and what is actually being executed?
– Woss
@Hector, it’s really not clear what behavior you’re hoping for.
– Rodolpho Sa
In the ready() function what I expected was that after Else she would execute that block, triggering an alert to the situation pointed out (n1>N2, N2>n1...). What is happening is that it only executes the first part (if($("#option1")..., alerting the result of this first block
– Heitor Murara