javascript - 如何使用 Dart 设置元素的文本?

标签 javascript html dart

我在 3 天前实现了我的第一个 helloworld,现在我想走得更远。

我尝试调用一个函数,并将结果放入我的 html 中。

我的 HelloWorld.dart

import 'dart:html';

main() {
  var s = '';
  for (var i = 0; i < 10; i++) {
    s = '$s$i ';
  }

  HTMLElement element = document.getElementById('text');
  element.innerHTML = 'test';
  //element.innerHTML = s;
  print(s);
}

我的 print(S) 工作,它在我的 dart 编辑器输出中打印我:0 1 2 3 4 5 6 7 8 9

但是现在,我想将结果放入我的 html 中。

所以这是我的 HelloWorld.html :

    <!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>HelloWorld</title>
    <link rel="stylesheet" href="HelloWorld.css">
  </head>
  <body>
    <h1>Exercice 01</h1>

    <p>Hello world from Dart!</p>

    <div id="container">
      <p id="text"></p>
    </div>

    <script type="application/dart" src="web/HelloWorld.dart"></script>
    <script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
  </body>
</html>

很简单不是吗?所以实际上我看到我的页面有我的 h1 和我的 p。但是,我在我的 id“文本”中看不到任何内容,我尝试推送我的 var s,但不起作用,所以我尝试推送一个简单的字符串,如您所见(返回我帖子的第一段代码) , 并且不起作用。

我可能误解了 .html 和 .dart 之间的通信,有人可以帮助我吗?

注意:我的输出没有任何错误。

最佳答案

感谢提问!

首先,使用 querySelector() 而不是 document.getElementById,如下所示:

import 'dart:html';

main() {
  var s = '';
  for (var i = 0; i < 10; i++) {
    s = '$s$i ';
  }

  var element = querySelector('#text');
  element.text = 'test';
  print(s);
}

querySelector() 通过接受 CSS 选择器并返回匹配的第一个元素来工作。要按 ID 查找元素,请使用 #the-id 语法(或者,在元素的 ID 前加上 # 前缀)。

使用 element.text setter 代替 innerHTML

希望对您有所帮助!

关于javascript - 如何使用 Dart 设置元素的文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13079345/

相关文章:

javascript - 单击时显示 div,再次单击时隐藏它

javascript - 未捕获的类型错误 : Cannot read property 'row' of undefined - google visualisation api

javascript - 无法使用 JavaScript 创建图像

html - 是否可以从给定位置开始以 HTML 格式显示枚举列表?

dart - 文本中的星期几、月份和天数

sqlite - 有没有办法以 Flutter 方式将 CSV 文件导入 Sqlite 数据库?

javascript - Angular 9 : forkJoin subscribe not working

javascript - Ember.js 1.5.1 绑定(bind)属性禁用到按钮

html - 文本未在 div 中间垂直对齐

flutter - 抖动图像裁切器未显示要裁切的图像