ボタンの二度押しを防止したい

質問

https://okwave.jp/qa/q9334826.html
の続き

インスペクタで見ると、最も初めに最も上のスコープでの下記はちゃんとtrueになっています。
answerBtn.disabled = true
trueならボタンは押せないはずですよね。

answerBtn.setText('text');
のよにしたのですが下記のように出ます。
Uncaught TypeError: answerBtn.setText is not a function
Failed to load resource: net::ERR_FILE_NOT_FOUND

＞＞＞
文字列を書き込む
書式
element.setText(text)

element : エレメント
text : 文字列
説明
標準の文字列をエレメント内に書き出すにはsetText()を使います。
文字列内にHTMLタグが含まれる場合でも、HTMLタグとして反映されず、指定した文字がそのまま表示されます。

という事ですが、これは、textという文字列をanswerBtnに代入して、もともと入っていたtrueかfalseを上書きするという事でしょうか？

するとどこかで上書きされていないかなぜわかるのでしょうか？

console.log(answerBtn.disabled);
としもture、falseが出てきません。

回答No.2

amanojaku1 · ベストアンサー

>このようにしましたが押せてしまいます
>answerBtn.disabled = 'disabled';

タグは「input」ですか？

>逆に押せるようにしたい時は下記のように空にしてやればいいのでしょうか？
>answerBtn.disabled = '';

そのようです。

下記に当方のソースをコピペします。

<input type="button" id="BtnID" value="hoge" >

<script type="text/javascript">
Btn = document.getElementById('BtnID');
Btn.disabled="disabled";
Btn.disabled=""; // ←ここをコメントにすると1度もクリックできない。
// つまり「Btn.disabled="disabled";」を解除したい場合は「Btn.disabled="";」で良い事になる。
Btn.addEventListener('click', function (){
Btn.value='piyo';
Btn.disabled="disabled";
alert("クリック");
}, false);
</script>

お礼

p id="answerBtnWrap">
<input id="answerBtn" class="btn" type="button">ボタン</input>
</p>

すいません上記のようにHTMLはなっておりwrapの方にしないと全体で押せないと思いpタグの方を押すと発動するようになっていました。

answerBtnの方に代えたところ確かに押せなくなったのですが、今度は下記のボタンを押しても押せるように変更できず、ずっと押せないままになってしまいました。
インスペクタで見るとanswerBtn.disabled = '';はfalseのままになっているのですが、
空にするがうまくいっているとfalseがtrueになるはずなのでしょうか？
それとも常にfalseのままになる物なのでしょうか？

canclickBtn.addEventListener('click', ()=> {

// 回答ボタンを押せるようにするfalse
answerBtn.disabled = '';

補足

その後inputをbuttonタグに変更したところうまくいきました。
理由はよくわかりませんが、

ただ、buttonタグの中にあるアイコンとbuttonタグの隙間が空く問題が発生しましたpaddingとborderを0にしても灰色の隙間が空きます。

回答No.5

amanojaku1

>回答No.4　amanojaku1

>JavaScriptにおいては上記のプリミティブ型以外はオブジェクト型です。
>当然、「INPUT type="button" 、INPUT type="text" 、INPUT type="checkbox" 、INPUT type="radio" 、OPTION、TEXTAREA」などのHTMLタグで作成されたGUI(Graphical User Interface)コンポーネントも、JavaScriptにおいてはオブジェクト型です、つまり その実態はインスタンスです。

「INPUT type="button" 、INPUT type="text" 、INPUT type="checkbox" 、INPUT type="radio" 、OPTION、TEXTAREA」などのHTMLタグがHTML内でオブジェクト型と言う意味ではありません。
ただしＩＥはオブジェクトとして処理しているらしいですが、それはブラウザ側の都合なので、プログラマーは、ブラウザの内部で どう処理されているのか、あまり深く考える必要もないでしょう。
クロスブラウザを考慮する場合にＩＥはGUI(Graphical User Interface)コンポーネントをオブジェクトとして処理しているので どうのこうのと言われる場合はあるかもしれませんが、普通は そんなに気にする必要はないと思います。

回答No.4

amanojaku1

>>イベントが来ているか、インスタンスは正常か

>この部分が初心者には難しいです。
>イベントが来ているというのは、
>answerBtn.disabled="disabled"がcanclickBtn.addEventListener('click', ()=> {
>内で実行されているか確認するという事でしょうか？

そうです。

>インスペクタ上でひとつづつ実行すると、実行前はfalseも何もないのに、
>実行後はインスペクタ上では、ここはfalseに変化します。
>実行自体はされているはずです。

そうですね、下記をイベント処理内に記述してみて正常に変化するかチェックしてみて下さい、answerBtnにインスタンスが正常に代入されているかチェックできると思います。

answerBtn.value = 'fuga';

>>インスタンスは正常か

>インスタンスとはクラスを具現化したオブジェクトですよね。

そうです。

>今回クラスは使っていないのですが、クラス以外でもインスタンは作成されるのですか？

オブジェクト型とプリミティブ型について
https://okwave.jp/qa/q9336910.html

数値型
文字列型
ブーリアン型
null型
undefined型
Symbol型

JavaScriptにおいては上記のプリミティブ型以外はオブジェクト型です。
当然、「INPUT type="button" 、INPUT type="text" 、INPUT type="checkbox" 、INPUT type="radio" 、OPTION、TEXTAREA」などのHTMLタグで作成されたGUI(Graphical User Interface)コンポーネントも、JavaScriptにおいてはオブジェクト型です、つまり その実態はインスタンスです。

>正常かというのもよくわかりません？

初心者に有りがちなのが、以前に変数(仮にhoge変数とする)に代入されていたインスタンスを、新たなインスタンスをhoge変数に代入して、以前のインスタンスを上書きしてクリアしてしまう事がありがちです。

回答No.3

amanojaku1

まず、タグは「input」ですか？

>canclickBtn.addEventListener('click', ()=> {

↑このイベント処理の中に下記を記述して、イベントが来ているか、インスタンスは正常かチェックしてみて下さい。

canclickBtn.value = 'piyo'；
answerBtn.value = 'fuga';

お礼

<p id="answerBtnWrap">
<input id="answerBtn" class="btn" type="button">ボタン</input>
</p>

disabledを代入して押せなく出来るのはinputの時のようなので上記のようにinputです。
answerBtn.disabled="disabled"

始めはpだったのですが、pタグの場合はdisabledは効かないのでしょうか？
input以外はfalseですか？

補足

＞＞＞
イベントが来ているか、インスタンスは正常か

この部分が初心者には難しいです。
イベントが来ているというのは、

answerBtn.disabled="disabled"がcanclickBtn.addEventListener('click', ()=> {
内で実行されているか確認するという事でしょうか？

インスペクタ上でひとつづつ実行すると、実行前はfalseも何もないのに、
実行後はインスペクタ上では、ここはfalseに変化します。
実行自体はされているはずです。

＞＞＞
インスタンスは正常か

インスタンスとはクラスを具現化したオブジェクトですよね。

今回クラスは使っていないのですが、クラス以外でもインスタンは作成されるのですか？
正常かというのもよくわかりません？

回答No.1

amanojaku1

>answerBtn.setText('text');
>のよにしたのですが下記のように出ます。
>Uncaught TypeError: answerBtn.setText is not a function
>Failed to load resource: net::ERR_FILE_NOT_FOUND

申しわけございませんでしたm(_ _)mアンドロイドと勘違いしてました。
「answerBtn.value='～';」でした。

>という事ですが、これは、textという文字列をanswerBtnに代入して、もともと入っていたtrueかfalseを上書きするという事でしょうか？

これは「trueかfalse」をチェックしている訳ではありません。
イベント内で「answerBtn.value='hoge';」と設定したとして、ボタンの文字が'hoge'に変化した場合、(1)イベントが正常に動いている、(2)新たなインスタンスで上書きされてない、と言う事を確認したかった訳です。

>answerBtn.disabled = true
>trueならボタンは押せないはずですよね。

「input」タグの場合、「answerBtn.disabled="disabled"」になるようです、Firefoxにて2度押しできない事を確認しました。

お礼

answerBtn.disabled="disabled"

これはHTMLの属性でこの属性をJSでくわえてくれとしているのですよね

このようにしましたが押せてしまいます
answerBtn.disabled = 'disabled';

逆に押せるようにしたい時は下記のように空にしてやればいいのでしょうか？
answerBtn.disabled = '';

グローバルに下記のようにしても始めから押せてしまいます。
const answerBtn = document.getElementById('answerBtnWrap');
answerBtn.disabled = 'disabled';