[解決済み] 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); }
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
-
[解決済み] 文字列がすべて同じ部分文字列で構成されているかどうかを調べるにはどうすればよいですか?
-
[解決済み] reactのrender関数でdynamic hrefを作成するには?
-
[解決済み] javascriptでオプションのパラメータを扱う
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] 文字列のn番目の出現箇所を取得するには?
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] URL/アドレスバーからJavascriptの関数を呼び出す
-
[解決済み] JavaScriptで、ある文字列が別の文字列の中に出現するすべてのインデックスを見つけるにはどうすればよいですか?
-
[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法
-
[解決済み] Javascriptで動的に命名されたメソッドを呼び出すにはどうすればよいですか?
-
[解決済み] Chromeの拡張機能開発にWebStormを使用するにはどうすればよいですか?
-
[解決済み] Chromeのwebkitインスペクタで「Unsafe JavaScript attempt to access frame with URL...」というエラーが継続的に発生する。
-
[解決済み] V8 Javascript エンジンのスタンドアロン実行