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

时间:2015-05-14 16:03:22

标签: javascript html

我只是玩得很​​开心,所以我建造了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>

2 个答案:

答案 0 :(得分:3)

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

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

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

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

enter image description here

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

答案 1 :(得分:1)

这里有两个问题:

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

这就是你想要的:

&#13;
&#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;
&#13;
&#13;