为什么我的WebApp不显示我的函数的输出？

Question

我正在尝试构建一个简单的Web应用程序，它接受大量的二进制输入，并计算一个布尔公式，然后输出。我做错了什么？

null

var vione = document.getElementById("ione");
var vitwo = document.getElementById("itwo");
var vithree = document.getElementById("ithree");

window.addEventListener("load", function() {
  if (document.getElementById("button") != null) {
    document.getElementById("button").addEventListener("click", test(vione, vitwo, vithree));
  }
});

function test(one, two, three) {
  return (vione && vitwo || vithree);

  console.log(vione);
  console.log(ooone)
}

document.getElementById("ooone").innerHTML = test(vione, vitwo, vithree);

<input type="number" id="ione" name="nione" min="0" max="1">
<input type="number" id="itwo" name="nitwo" min="0" max="1">
<input type="number" id="ithree" name="nithree" min="0" max="1">
<button type="button" id="button">GO!</button>
<p id="ooone"></p>

null

Answer 1

元素需要存在，所以您使用一个加载事件侦听器，但元素在外部

需要界定范围。

number字段不返回二进制

null

js lang-js prettyprint-override">const dec2bin = dec => (dec >>> 0).toString(2);


window.addEventListener("load", function() {
  const vione = document.getElementById("ione"),
    vitwo = document.getElementById("itwo"),
    vithree = document.getElementById("ithree"),
    button = document.getElementById("button")

  if (button) {
    button.addEventListener("click", test);
  }


  function test() {
    document.getElementById("ooone").innerHTML = dec2bin(vione.value) && dec2bin(vitwo.value) || dec2bin(vithree.value)
  }
});

<input type="number" id="ione" name="nione" min="0" max="1">
<input type="number" id="itwo" name="nitwo" min="0" max="1">
<input type="number" id="ithree" name="nithree" min="0" max="1">
<button type="button" id="button">GO!</button>
<p id="ooone"></p>