質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • TypeScript

    358questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

TypeScriptでボタンにイベントを追加したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,794

TomoakiKurata

score 38

はじめまして。

VisualStudioからTypeScriptのプロジェクトを新規作成

<div id="content">
     <button style="width:100%;height:100px;" type="button" id="OnHenkanClick">変換</button>
</div>

最初のcontentの中にボタンを作成

function HenkanClick() {
    alert("ですね");
}

class Greeter {
    element: HTMLElement;
    span: HTMLElement;
    timerToken: number;
    ele1: HTMLButtonElement;

    constructor(element: HTMLElement) {
        this.element = element;
        this.ele1 = <HTMLButtonElement>document.getElementById("OnHenkanClick");

        this.ele1.onclick = <Event:MouseEvent> HenkanClick();

上記で
ev: MouseEvent) => any' に割り当てることはできません。
とビルド前にエラーが発生します。
TypeScriptのクラスのなどをまだ理解していません
どのように書けばいいのでしょうか?

追記
jsファイルの中を見てみました。

function HenkanClick() {
    alert("ですね");
}
var Greeter = (function () {
    function Greeter(element) {
        this.element = element;
        this.ele1 = document.getElementById("OnHenkanClick");
        this.ele1.onclick = ;

あ、TypeScriptのクラスのnewをファンクションのnewに置き換えてるのか
この場合、onclickに正しく入力するにはどうかけばいいのかな

イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

こんにちは。

this.ele1.onclick = <Event:MouseEvent> HenkanClick(); 

this.ele1.onclick = HenkanClick;としたらどうでしょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/27 01:00

    お返事ありがとうございます!

    実行時に ですね! と表示されてしまい。
    ev: MouseEvent) => any' に割り当てることはできません。
    ビルド前はエラーが表示されたままです。

    キャンセル

  • 2016/03/27 02:12

    私のほうでは上記の対応でうまくいってます。
    現在のtsファイルをもう少し提示して頂ければアドバイスできるかもしれません。

    キャンセル

  • 2016/03/27 08:08

    Tak1wa様、わざわざ試していただいてありがとうございます!


    function HenkanClick() {
    alert("ですね");
    }

    class Greeter {
    element: HTMLElement;
    span: HTMLElement;
    timerToken: number;
    ele1: HTMLButtonElement;

    constructor(element: HTMLElement) {
    this.element = element;
    this.ele1 = <HTMLButtonElement>document.getElementById("OnHenkanClick");

    this.ele1.onclick = HenkanClick();
    this.element.innerHTML += "The time is: ";

    this.span = document.createElement('span');
    this.element.appendChild(this.span);
    this.span.innerText = new Date().toUTCString();
    }

    }

    window.onload = () => {
    var el = document.getElementById('content');
    var greeter = new Greeter(el);
    };

    全TSになります。

    キャンセル

  • 2016/03/27 14:37

    HenkanClickの後の()は不要です。
    私のTSをのせておきます。

    class Greeter {
    element: HTMLElement;
    span: HTMLElement;
    timerToken: number;
    ele1: HTMLButtonElement;

    constructor(element: HTMLElement) {
    this.element = element;
    this.element.innerHTML += "The time is: ";
    this.span = document.createElement('span');
    this.element.appendChild(this.span);
    this.span.innerText = new Date().toUTCString();

    this.ele1 = <HTMLButtonElement>document.getElementById("OnHenkanClick");
    this.ele1.onclick = HenkanClick;
    }

    start() {
    this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);
    }

    stop() {
    clearTimeout(this.timerToken);
    }

    }

    window.onload = () => {
    var el = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
    };

    function HenkanClick() {
    alert("ですね!");
    }

    キャンセル

  • 2016/03/27 23:20

    ありがとうございます!
    動きました!
    昨日から悩みっぱなしでした!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    window.open を使わずにpopupする方法

    window.open を使わずにpopup画面を表示し、 その中でボタンを押したりしたい div 要素を動的に変えて、モーダルで・・・ という方法があるようですが、 元の画面

  • 解決済

    JavaScriptでギャラリーを作りたい

    現在JSでギャラリー的なものを作ろうとしています 仕様としては 画面上段に画像(原寸より小さいもの)を表示し、クリックされると下にその画像の原寸大が表示されるというものです ですが

  • 解決済

    モーダルが表示されない

    前提・実現したいこと Bootstrapでボタンをクリックするとモーダルがポップアップするサイトを作っています。 ボタンを押すと一瞬だけアクションが起きるのですが、すぐに元の画

  • 解決済

    AngularのComponent内にTwitterボタンを置きたい

    前提・実現したいこと Angularで作っているWebアプリケーションにTwitterボタンを配置しようとしています。 ボタンは以下で生成したコードをそのまま使っています。

  • 解決済

    子コンポーネントから親コンポーネントのメソッドを呼びたい

    タイトルの通りです。 以下に示すコードで、ChildComponentからParentComponentのsayHello()メソッドを呼びたいときに、どのように記述したらよ

  • 解決済

    canvasで描画したグラフが削除できません

    Angular4を勉強している者です。 TypeScriptにてChart.jsを使ったグラフ描写を実装しています。 <!doctype html> <html lang=

  • 解決済

    TypeScript+webpack+Vue.js

    https://ics.media/entry/16329#webpack-ts-vue このサイトに従って環境を作ったのですが、うまく動きません(T___T) コンソール

  • 解決済

    vue.js axios.getで格納したデータが消える

    created: function () { var data: any[] = new Array(); ax

同じタグがついた質問を見る

  • TypeScript

    358questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。