Why is this code not properly displaying the output?

Question

I'm just having some fun screwing around, and so I built this. It should be taking the values from the forms, putting them through the !a != !b mockup logical XOR, and then outputting to the <p> tag, but I'm not sure why it's not working. Could anyone help me with it?

window.onload = function(){
 function xOR() {
    var a = document.getElementById("aForm");
    var b = document.getElementById("bForm");
    var output = (!a != !b);
    document.getElementById("xorOutput").innerHTML = "Output Value: " + output;
 }
};

<h2>random testing</h2>
    <h3>Logical XOR Test</h3>
        <h4>First Input Value</h4>
            <form id="aForm">
                <input type="radio" name="aValue" value="true">True
                <br>
                <input type="radio" name="aValue" value="false">False
            </form>
        <h4>Second Input Value</h4>
            <form id="bForm">
                <input type="radio" name="bValue" value="true">True
                <br>
                <input type="radio" name="bValue" value="false">False
            </form>
        <br>
        <button onclick="xOR()">Perform XOR</button>
        <p id="xorOutput"></p>

Can you post the relevant parts of your code **in** your question? Assume that for any given site, there is somebody who can both answer your question, and can't see the important parts of it because the site you need them to look at is, say, blocked by a firewall, etc. Many thanks. — Wai Ha Lee, May 14 '15 at 16:09

score 3 · Accepted Answer · answered May 14 '15 at 16:09

3

The problem is rather simple. jsFiddle will implicitly wrap your inserted JavaScript inside of window.onload. In other words, your code looks like this:

window.onload = function(){
 //insert code here
};

If you create a function in there, it is scoped to that anonymous function and not accessible globally when you attempt to attach it to an event handler inline.

Changing the fiddle to "no wrap, in head" as the option will fix your problem.

enter image description here

https://jsfiddle.net/o3xw7ghh/11/

answered May 14 '15 at 16:09

Travis J

81,153
41
202
273

This gets the code to run, but the output is still incorrect (always false) because he's doing the boolean logic on `
` elements.
– mlrawlings May 14 '15 at 16:25
@mlrawlings - It properly displays the output. That the logic or approach is flawed would be a separate issue. – Travis J May 14 '15 at 16:26

score 1 · Answer 2 · answered May 14 '15 at 16:21

Two issues here:

to get your code running you need to resolve the scoping issue where xOR isn't accessible because it's wrapped by window.onload
you're comparing the form elements rather than the values of the selected radio buttons

Here's what you want:

function xOR() {
    var output;
    var a = getRadioValue("aValue");
    var b = getRadioValue("bValue");
    if(a && b) {
       a = stringToBool(a);
       b = stringToBool(b);
       output = (a != b);
       document.getElementById("xorOutput").innerHTML = "Output Value: " + output;
    }
}

function getRadioValue(name) {
    var radios = document.getElementsByName(name);

    for(var i = 0; i < radios.length; i++) {
       if(radios[i].checked == true) {
           return radios[i].value;
       }
    }
}

function stringToBool(val) {
     return val == "true"
}

* {
    font-family: Courier;
}

<body>
    <h2>random testing</h2>
    <h3>Logical XOR Test</h3>
        <h4>First Input Value</h4>
            <form id="aForm">
                <input type="radio" name="aValue" value="true">True
                <br>
                <input type="radio" name="aValue" value="false">False
            </form>
        <h4>Second Input Value</h4>
            <form id="bForm">
                <input type="radio" name="bValue" value="true">True
                <br>
                <input type="radio" name="bValue" value="false">False
            </form>
        <br>
        <button onclick="xOR()">Perform XOR</button>
        <p id="xorOutput"></p>
</body>

Why is this code not properly displaying the output?

2 Answers2