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

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

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

799閲覧

JavaScript ボタンについて

rinshankaiho

総合スコア3

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/07/14 07:00

編集2021/07/14 07:40

前提・実現したいこと

Javascriptで「A」ボタン、「B」ボタン、「C」ボタンの3つのボタンを押したらそれぞれ「A」、「B」、「C」と表示されるようなボタンを作りたいです。
例えば、「A」ボタンを押した次に「B」ボタンを押しても「A B」となるように、前に押したボタンの内容が書き換えられないようにしたいです。
どうしたらよいでしょうか?

発生している問題・エラーメッセージ

それぞれのボタンのIDを取得して、ボタンごとに関数を割り当てるところまでは出来たのですが、 1つのボタンを押すと、前まで表示されていた内容が書き換えられてしまいます。

該当のソースコード

Javascript

試したこと

自分で書いたコードを載せておきます。何卒助言のほどよろしくお願いいたします。

var btn3 = document.getElementById('q3Kbutton'); var btn4 = document.getElementById("q3Obutton"); var btn5 = document.getElementById("q3Mbutton"); var btn6 = document.getElementById("q3Abutton"); var elm3 = document.getElementById("q3output"); function click3(){ var Kclick = '' + 'K'; elm3.textContent = Kclick; } btn3.onclick = click3; function click4(){ var Oclick = '' + 'O'; elm3.textContent = Oclick; } btn4.onclick = click4; function click5(){ var Mclick = '' + 'M'; elm3.textContent = Mclick; } btn5.onclick = click5; function click6(){ var Aclick = '' + 'A'; elm3.textContent = Aclick; } btn6.onclick = click6;

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/07/14 07:10

コードはマークダウンのcode機能を利用してご提示ください。 質問は編集できます。
rinshankaiho

2021/07/14 07:22

不慣れで申し訳ございません。 どのように操作すればよいか教えて頂ければ幸いです。
m.ts10806

2021/07/14 07:32 編集

このサービスで質問したことがないので、具体的な位置までは分からないのですが投稿者のみに表示される「編集」ボタンがあるはずです。 マークダウンについてはヘルプや投稿ページの左下のタブを確認するか、 https://teratail.com/questions/238564 など、過去質問を参考にしてください
rinshankaiho

2021/07/14 07:40

解決しました! 丁寧な対応をしていただきありがとうございました!!
m.ts10806

2021/07/14 07:53

これに限らず大抵のことは過去質問やヘルプで言及されているので、グーグル検索で見つからなかったらサイト内検索も試してみてください
guest

回答2

0

elm3.textContent = elm3.textContent + Kclick;

では

投稿2021/07/14 07:04

y_waiwai

総合スコア88042

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rinshankaiho

2021/07/14 07:21

解決しました! ありがとうございました!!
guest

0

ベストアンサー

elm3.textContent = ...elm3.textContent += ... に変更しましょう。

投稿2021/07/14 07:03

int32_t

総合スコア21695

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rinshankaiho

2021/07/14 07:20

助かります! ありがとうございました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問