dom元素属性和事件的奇怪错误

Question

所以我一直收到这种类型的错误：
加载资源失败：net::ERR_CACHE_MISS https://ssl.gstatic.com/chrome/components/doodle-notifier-01.html 打破异常：null 对象没有 getter 'onClick'。

这是我的 HTML：

<label for="stringToEncode">Encode a String to Base64</label>
<input type="text" id="stringToEncode">
<button type="button" id="submit">Encode</button>

现在很简单。我正在朝着更雄心勃勃的目标努力。

这是我的飞镖：

import 'dart:html';

void main() {
  var dataEncode = querySelector('stringToEncode');
  var submit = querySelector('submit');

  submit.onClick.listen((e) {
    String convert = dataEncode.value;
    var output = querySelector('output');

    if(convert != null) {
      var base = window.btoa(convert);
      output.text = "$base";
    } else {
      window.alert("you need to enter something into the input");
    }
  });
}

只是尝试在单击提交按钮时对输入值进行一些简单的编码。我计划稍后尝试用图像来做这件事，但我决定从小处着手。这不是重点。

为什么会出现错误：
“加载资源失败：net::ERR_CACHE_MISS https://ssl.gstatic.com/chrome/components/doodle-notifier-01.html 打破异常：null 对象没有 getter 'onClick'。”对于简单的 onClick 事件侦听器？

Answer 1

您将 querySelector 用于 submit 元素，但您将按钮定义为 <button type="button" id="submit">Encode</button>。而且您在querySelector('stringToEncode'); 处缺少#。