プログラム学習室 http://studyhallweb.com/

Dart言語: 表示テキストの変更

サンプル表示


←これはspan id="text1"の文字
Spanで指定されたテキスト←これはspan id="text2"の文字

Sample Code

タグ自体がテキストを持っているものは(例.input)、テキストの値を直接変更できる。
タグが範囲をしているものの場合(例.span)、テキストやHTMLの追加ができる。
これらの値を変更するには、一度消してから追加すればよい。

HTML

<form>
    <input type="text" id="display">
</form>
<br/>
<span id="text1"></span><br/>←これはspan id="text1"の文字
<br/>
<span id="text2">Spanで指定されたテキスト</span><br/>←これはspan id="text2"の文字
					
Dart

import 'dart:html';

class chgTxt {
  // HTML内の各要素にあわせて宣言
  InputElement txtMessage;
  ButtonElement btn1, btn2, btn3;
  SpanElement spnText1;
  // すべのタグ要素が準備されているわけではないCodeElement, TextareaElement はない
  Element spnText2 = new Element.pre(); // この形でもOK
  bool _flg = true;

  chgTxt() {
    // Input box
    btn1 = querySelector('#btnInputText');
    btn1.onClick.listen((e)=> _chgInputText('Test1'));

    // Text1
    btn2 = querySelector('#btnAddText');
    btn2.onClick.listen((e)=> _addSpanText('Test2'));

    // Text2
    btn3 = querySelector('#btnChgText');
    btn3.onClick.listen((e)=> _chgSpanText());
}

  _chgInputText(String s) {
    // 表示を変更するのは inputのテキストを変えるのがやりやすい
    txtMessage = querySelector('#inputBox');
    // 消えたり表示させたりする
    if (txtMessage.value != s) {
      txtMessage.value=s;
    } else {
      txtMessage.value="";
    }
  }

  _addSpanText(String s)  {
    // spanで囲んだテキストはspnText.valueにはならない
    // spanに範囲を指定するものであり値はないため spnText.valueは存在しない
    spnText1 = querySelector('#text1');
    // spnText.value='Test2'; これはエラーになる
    // テキストやHTMLの追加は出来る
    spnText1.appendText(s);  // これはOK ただし追加になる
    spnText1.appendHtml('<b>$s</b>');
  }

  _chgSpanText() {
    // 変更するには一度消せばよい
    spnText2 = querySelector('#text2');
    // spnText2.id = 'text2';  これでも良いように Up and Running に書かれているが動かない
    spnText2.children.clear();  // 消してから
    String s;
    if (_flg) {
      s = '書き換えた文字';
      _flg = false;
    } else {
      s = 'Spanで指定されたテキスト';
      _flg = true;
    }
    spnText2.appendText(s);    // 追加
  }
}

void main() {
	chgTxt chg = new chgTxt();
}
					
Last update 2014-04-23

Form:A400;