Why the function javascript give me the same value

Question

Why the function give me the same value when I want it to change every time I choose other radio buttom

    <form>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label><br>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label><br>
    <input type="radio" id="other" name="gender" value="other">
    <label for="other">Other</label>
    <button onclick="addSpan()">Try it</button>

</form>

this is function

<script>
function addSpan() {
    var female = document.getElementById("female");
    var male = document.getElementById("male");
    var other = document.getElementById("other");
    if (document.getElementById("female").checked = true) {
        document.body.innerHTML += '<span class="bullet">female</span> ';
    }
    else if (document.getElementById("male").checked = true) {
        document.body.innerHTML += '<span class="bullet">male</span> ';
    }
    else {
        document.body.innerHTML += '<span class="bullet">other</span> ';
    }
}

resultat [enter image description here][1]

evrey time return female – abdelkader fattnassi Nov 11 '20 at 23:28 — abdelkader fattnassi, Nov 11 '20 at 23:28
== true instead of = true... – Lee Taylor Nov 11 '20 at 23:30 — Lee Taylor, Nov 11 '20 at 23:30
try use .getElementByName instead of getElementById – Chris P Nov 11 '20 at 23:30 — Chris P, Nov 11 '20 at 23:30
see: https://playcode.io/703489/ less code – Lawrence Cherone Nov 11 '20 at 23:52 — Lawrence Cherone, Nov 11 '20 at 23:52

score 1 · Accepted Answer · answered Nov 11 '20 at 23:31

1

Used = inplace of ===

function addSpan() {
    var female = document.getElementById("female");
    var male = document.getElementById("male");
    var other = document.getElementById("other");
    if (female.checked === true) { // when checking something is true/false use === not = as = assigns a new value and === is checking if it is equal, also use the variables you assigned at the start
        document.body.innerHTML += '<span class="bullet">female</span> ';
    }
    else if (male.checked) { // You can actually shorthand this as an IF statement automatically checks for if its equal to true
        document.body.innerHTML += '<span class="bullet">male</span> ';
    }
    else {
        document.body.innerHTML += '<span class="bullet">other</span> ';
    }
}

answered Nov 11 '20 at 23:31

Coupe

372
2
12

`===` won't work here since it's bool – A. Meshu Nov 11 '20 at 23:32
=== works for true and false? – Coupe Nov 11 '20 at 23:35
.checked returns a boolean value – Coupe Nov 11 '20 at 23:36
Sorry... bad habit i guess. – A. Meshu Nov 11 '20 at 23:37
Im confused I am using === ? – Coupe Nov 11 '20 at 23:38
your link likes === but doesnt like == – Coupe Nov 11 '20 at 23:38
@BenCoupe Your code is good/correct (which is why I upvoted) – Lawrence Cherone Nov 11 '20 at 23:38
@LawrenceCherone thanks, i think he might of replied to wrong post as the other answer uses the `==` – Coupe Nov 11 '20 at 23:40

score 1 · Answer 2 · answered Nov 11 '20 at 23:31

1

You want == instead of = here:

document.getElementById("female").checked == true

= makes it true. == asks if it is true.

answered Nov 11 '20 at 23:31

Ben West

4,398
1
16
16

Why the function javascript give me the same value

2 Answers2