The radio button is behaving like a checkbox and does not allow selecting or unchecking the option

Asked

Viewed 156 times

1

function transformar(){  
    var converter = parseFloat(document.getElementById('converter').value);
    var resposta = document.getElementById('resposta');
    var resp = '';
    

    
    if(document.getElementById('celsius').checked){
        resp = (converter - 32) * (5/9);
    }
    if(document.getElementById('fahren').checked){
        resp = (converter * (9/5)+32);
    }
    resposta.innerHTML = resp;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Temperatura</title>
    <script src="temperatura.js"></script>
</head>
<body>
    <form>
        Graus Celsius: <input type="radio" id="celsius">
        Graus Fahrenheit: <input type="radio" id="fahren"> <br>
        Converter Valor: <input type="number" id="converter">
        <button onclick="transformar()">transformar</button><br>
        Resposta:
        <div id="resposta"></div>
    </form>
        
</body>
</html>

javascript html radiobutton

1 answer

1


For you to have a group of radio buttons, that is, that allow one button turned off the other you have to give the same name to all elements of that group. Your code doesn’t even have a name (name), he assumes the same id, and has no value (value which is a label for the button), it assumes the id, but it gets ugly because it is the name of an identifier and not a representative text. Without the same name each button is independent and has nothing to turn off since it is unique, you have two radio button with one button each.

See more about using id in What is the HTML priority? "id" or "class"?. Use it properly and don’t let it be a wild card for everything.

HTML is very permissive, likes inexperienced programmers because it works, despite being wrong. Almost all the HTML codes I see in questions here are poorly written because they do not consider how it works properly, there is only concern if it is working. In this case it was lucky because it didn’t work and didn’t do something wrong inadvertently.

Fiat 147 todo detonado andando pelas ruas

There are other bad things in this code. I fixed only the problem that is in the question, it is for you the exercise to fix other parts. That’s how it works:

function transformar(){  
    var converter = parseFloat(document.getElementById('converter').value);
    var resposta = document.getElementById('resposta');
    var resp = '';
    

    
    if(document.getElementById('celsius').checked){
        resp = (converter - 32) * (5/9);
    }
    if(document.getElementById('fahren').checked){
        resp = (converter * (9/5)+32);
    }
    resposta.innerHTML = resp;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Temperatura</title>
    <script src="temperatura.js"></script>
</head>
<body>
    <form>
        Graus Celsius: <input type="radio" id="celsius" name="temperatura" value="Celsius">
        Graus Fahrenheit: <input type="radio" id="fahren" name="temperatura" value="Fahrenheit"> <br>
        Converter Valor: <input type="number" id="converter">
        <button onclick="transformar()">transformar</button><br>
        Resposta:
        <div id="resposta"></div>
    </form>
        
</body>
</html>

I put in the Github for future reference.

Browser other questions tagged javascript html radiobutton

You are not signed in. Login or sign up in order to post.