Question

我只是玩得很开心，所以我建造了this。它应该从表单中获取值，将它们放入!a != !b模型逻辑XOR，然后输出到<p>标记，但我不确定它为什么不起作用。任何人都可以帮我吗？

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>

Answer 1

问题很简单。 jsFiddle会隐式将你插入的JavaScript包装在window.onload中。换句话说，您的代码如下所示：

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

如果你在那里创建一个函数，它的作用域是该匿名函数，当你试图将它附加到一个内联的事件处理程序时，它不能全局访问。

将小提琴改为“无包裹，在头部”选项将解决您的问题。

enter image description here

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

Answer 2

这里有两个问题：

要让您的代码运行，您需要解决xOR无法访问的范围问题，因为它被window.onload
您正在比较表单元素而不是所选单选按钮的值

这就是你想要的：

＆＃13;

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"
}

＆＃13;

* {
    font-family: Courier;
}

＆＃13;

<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>

＆＃13;

为什么这段代码没有正确显示输出？

2 个答案: