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

Question

所以我一直收到这种类型的错误：
无法加载资源：net::ERR_CACHE_MISS https://ssl.gstatic.com/chrome/components/doodle-notifier-01.html 异常中断：空对象没有 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 异常中断：空对象没有 getter 'onClick'。”对于简单的 onClick 事件侦听器？

Answer 1

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

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

Strange Error for dom element properties and events

dart

dart-html