ボタンクリック時のテキストを変更する
2023-09-07 14:49:33
質問
をクリックすると
myButton1
ボタンをクリックすると、値が
Close Curtain
から
Open Curtain
.
HTMLです。
<input onclick="change()" type="button" value="Open Curtain" id="myButton1"></input>
ジャバスクリプトです。
function change();
{
document.getElementById("myButton1").value="Close Curtain";
}
今、ボタンがopen curtainと表示されているので、close curtainに変えたいのですが、これでいいのでしょうか?
どのように解決するのですか?
もし私があなたの質問を正しく理解していれば、あなたは「カーテンを開ける」と「カーテンを閉める」を切り替えたいのですね。もしそれが必要なら、これはうまくいくでしょう。
function change() // no ';' here
{
if (this.value=="Close Curtain") this.value = "Open Curtain";
else this.value = "Close Curtain";
}
を使う必要がないことに注意してください。
document.getElementById("myButton1")
の中で呼ばれるため、change の中で
コンテキスト
の
myButton1
-- 文脈というのは、あとでJSの本を読むとわかると思います。
アップデイト :
私は間違っていました。さっき言った通りではありません。
this
は要素そのものを参照するわけではありません。これを使えばいいんです。
function change() // no ';' here
{
var elem = document.getElementById("myButton1");
if (elem.value=="Close Curtain") elem.value = "Open Curtain";
else elem.value = "Close Curtain";
}
関連
-
[解決済み] JavaScriptのオブジェクトをループスルーまたは列挙するにはどうすればよいですか?
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] JavaScriptで文字列をbooleanに変換するにはどうしたらいいですか?
-
[解決済み] ループ内のJavaScriptクロージャ - シンプルな実用例
-
[解決済み] HTML5のlocalStorageにオブジェクトを格納する方法は?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] HTMLマークアップのどこに<script>タグを記述すればよいですか?
-
[解決済み] テキストボックスのEnterキーで、JavaScriptでボタンクリックをトリガーする
-
[解決済み】JavaScript版sleep()とは?)
-
[解決済み】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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】onclickイベントで複数のJavaScript関数を呼び出すには?
-
[解決済み] AngularJSのエラーです。Cross Origin リクエストはプロトコルスキーム http, data, chrome-extension, https に対してのみサポートされています。
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] ExtJS 4のイベントハンドリングについて
-
[解決済み] JavaScriptで、ある文字列が別の文字列の中に出現するすべてのインデックスを見つけるにはどうすればよいですか?
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] Chromeの拡張機能開発にWebStormを使用するにはどうすればよいですか?
-
[解決済み] jqueryはjavascriptのライブラリなのかフレームワークなのか?[クローズド]
-
[解決済み] 文字列とラベルのローカライズとグローバリゼーションのベストプラクティス【終了しました
-
[解決済み] JavaScriptとLuaの微妙な違い [終了しました]