1. ホーム
  2. javascript

[解決済み] Javascriptの関数でクリック時の動作を変更する

2023-08-15 16:28:50

質問

ボタンがあります。

<button id="a" onclick="Foo()">Button A</button>

このボタンを初めてクリックしたとき、Fooを実行させたい(これは正しく実行される)。

function Foo() {
  document.getElementById("a").onclick = Bar();
}

最初にボタンをクリックしたときに起こるようにしたいのは、onclick関数を Foo() から Bar() . 今のところ、無限ループか、全く変化しないかのどちらかしか実現できていません。 Bar() はこのような感じになります。

function Bar() {
  document.getElementById("a").onclick = Foo();
}

このように、このボタンをクリックすると、どの関数が呼び出されるかが交互に切り替わるだけです。どうしたらこれが動作するようになるのでしょうか?あるいは、投稿の全文を表示/非表示するためのより良い方法は何でしょうか? それはもともと短く始まり、私は "see the full text." へのボタンを提供しますが、私がそのボタンをクリックすると、ユーザーは長いバージョンのテキストを消すためにボタンを再度クリックできるようにしたいと思います。

助けになるなら、ここに完全なコードがあります。

function ShowError(id) {
    document.getElementById(id).className = document.getElementById(id).className.replace(/\bheight_limited\b/, '');
    document.getElementById(id+"Text").className = document.getElementById(id+"Text").className.replace(/\bheight_limited\b/, '');
    document.getElementById(id+"Button").innerHTML = "HIDE FULL ERROR";
    document.getElementById(id+"Button").onclick = HideError(id);
}

function HideError(id) {
    document.getElementById(id).className += " height_limited";
    document.getElementById(id+"Text").className += " height_limited";
    document.getElementById(id+"Button").innerHTML = "SHOW FULL ERROR";
    document.getElementById(id+"Button").onclick = "ShowError(id)";
}

どのように解決するのですか?

あなたのコードは、関数を呼び出して、戻り値をonClickに代入している、また、それは'onclick'であるべきです。これは、それがどのように見えるべきかということです。

document.getElementById("a").onclick = Bar;

あなたの他のコードを見ると、おそらくこのようなことをしたいのでしょう。

document.getElementById(id+"Button").onclick = function() { HideError(id); }