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

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

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

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

Q&A

解決済

2回答

2843閲覧

ボタンが押されている時だけ実行など、この状態の時だけ実行としたい。

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2018/05/25 04:00

disabledプロパティが存在しないと出てきます。
下記の部分です・
if(hintBtn.disabled === 'disabled')

周辺のソースは下記に記載しました。
https://codepen.io/anon/pen/wjbebe

仕様上disabledプロパティは、始めは存在しないのでしょうか?

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

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

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

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

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

kei344

2018/05/25 04:31

コードは外部サービスだけでなく、質問文にコードブロックでお書きください。
guest

回答2

0

まだ何も代入していないので、hintBtnはundefinedでは?

投稿2018/05/25 04:37

x_x

総合スコア13749

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

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

退会済みユーザー

退会済みユーザー

2018/05/25 05:17

codepen上には、要素の取得が記載されていないですがもちろんボタンの要素は取得しています。 それでもdisabledプロパティがundefinedになります。
x_x

2018/05/25 06:29

質問文中には何の要素かさえ書かれていませんが、ボタン要素であれば作った瞬間に存在します。 console.log(document.createElement('button').disabled); // false
x_x

2018/05/25 06:37

まあ、書かれていないことまでわかるエスパーではないので、実際に問題が起こるコードを出してください
yambejp

2018/05/25 06:39

codepenの使い方を誤解しているのでは? エラーがでるような全体像を書かないとわざわざcodepenつかう意味がないと思います
退会済みユーザー

退会済みユーザー

2018/05/25 06:42

var hint1 = document.createElement('p'); mainContWrap.appendChild(hint1, description2.nextSibling); hint1.innerHTML = ''; hint1.innerHTML = '<input id="jsHint" class="u-mt-1rem" type="button" value="!'; var hintBtn = document.getElementById('jsHint'); if(hintBtn.disabled === 'disabled') {~ こんな感じです
yambejp

2018/05/25 06:44

上記を含め、HTMLをあわせてcodepenに追記したらどうでしょう?
x_x

2018/05/25 06:46

ドキュメントツリーにないものはgetElementByIdで取得できません。
退会済みユーザー

退会済みユーザー

2018/05/25 06:59

mainContWrap.appendChild(hint1, description2.nextSibling); これでDOMツリーに挿入されているのではないのですか?
x_x

2018/05/25 07:04

mainContWrapが不明なのでわかりません。
x_x

2018/05/25 07:05

そもそも、innerHTMLは完成していないのでは?
退会済みユーザー

退会済みユーザー

2018/05/25 07:09

var hintBtn = document.getElementById('jsHint'); にエラーは出ていないので、その問題ではありません。 ここまでは問題なく取得できています。 あくまで if(hintBtn.disabled === 'disabled') {~ ここの条件式の問題です。
x_x

2018/05/25 07:13

取れなくてもエラーにはなりません。nullが返ってくるだけです。 エラーメッセージはnullにdisabledプロパティがないってものではありませんでしたか?
退会済みユーザー

退会済みユーザー

2018/05/25 07:23

var hintBtn = document.getElementById('jsHint')の宣言の前に条件式を実行していることがわかりました。私の凡ミスだったので申し訳ございません。
guest

0

ベストアンサー

if(hintBtn.disabled === 'disabled')

disabledプロパティの値はbool値です。

https://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement

なので、if(hintBtn.disabled === 'disabled')の条件式だと常にfalseが返ります。

正しくは、if(hintBtn.disabled === true)か、if(hintBtn.disabled === false)です。

もしくは、if(hintBtn.disabled)か、if(!hintBtn.disabled)です。

https://codepen.io/anon/pen/JvQyQX

参考

4.10.19.5 Enabling and disabling form controls: the disabled attribute

The disabled content attribute is a boolean attribute.

A form control is disabled if its disabled attribute is set, or if it is a descendant of a fieldset element whose disabled attribute is set and is not a descendant of that fieldset element's first legend element child, if any.

A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element.

Constraint validation: If an element is disabled, it is barred from constraint validation.

The disabled IDL attribute must reflect the disabled content attribute.

https://www.w3.org/TR/2018/SPSD-html5-20180327/forms.html#concept-fe-disabled

2.4.2 Boolean attributes

A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

Here is an example of a checkbox that is checked and disabled. The checked and disabled attributes are the boolean attributes.

<label><input type=checkbox checked name=cheese disabled> Cheese</label> This could be equivalently written as this: <label><input type=checkbox checked=checked name=cheese disabled=disabled> Cheese</label> You can also mix styles; the following is still equivalent: <label><input type='checkbox' checked name=cheese disabled=""> Cheese</label>

https://www.w3.org/TR/2018/SPSD-html5-20180327/infrastructure.html#boolean-attribute

投稿2018/05/25 07:17

編集2018/05/25 08:47
HayatoKamono

総合スコア2415

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

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

退会済みユーザー

退会済みユーザー

2018/05/25 07:30

var hintBtn = document.getElementById('jsHint')の宣言の前に条件式を実行していることがわかりました。私の凡ミスだったので申し訳ございません。 disabled属性の値は、絶対にtrueかfalseしかないのですね。 二度押しを防止するために、一度押したら押せないようにしています。 そして下記で押せないようにされていたら、押せるように変更したいのですが、 var hintBtn = document.getElementById('jsHint'); if(hintBtn.disabled === 'disabled') { hintBtn.disabled = 'false'; } その場合 var hintBtn = document.getElementById('jsHint'); if(hintBtn.disabled === true) { hintBtn.disabled = 'false'; } とすればいいのでしょうか? つまり値を再代入する場合は、trueが押せない状態、falseが押せる状態にへんこうする。 またすでに真偽値が入っている場合は現在trueが押せない状態、falseが押せる状態になっているという意味。 でよろしかったでしょうか
x_x

2018/05/25 07:33

プロパティが存在しないという当初の問題から外れているようですが?
HayatoKamono

2018/05/25 07:37

質問者さんがcodepenにあげているコードを拝見しましたが、動作確認が出来るコードになっていないので、実行可能な状態のコードを用意して、追加の質問の方は新規質問として投稿して下さい。
退会済みユーザー

退会済みユーザー

2018/05/25 07:46

この問いは解決しましたので、真偽値に関してだけの質問をするのでお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問