style.display="hidden"およびstyle.display="block"

Question

下記のようにHTMLのtitle_checker_A,title_checker_B要素を入力文字数に
応じて、hidden/blockをさせたいのですが、style属性が変化してくれません。
下記のようにイベントハンドラは適切に変化を検知しているので、属性変化部分に問題があるのですが、どこに問題があるのでしょうか？

<i style="display:block" id="title_checker_A" class="fa fa-circle" aria-hidden="true"></i>
<i style="display:none" id="title_checker_B" class="fa fa-check-square" aria-hidden="true"></i>

window.onload=function(){
var elm=document.getElementById('title_a');
elm.addEventListener( "keyup", function() {
setTimeout( function() {
	console.log(elm.value.length);
		if (elm.value.length>=5) {
		console.log(elm.value.length);
		document.getElementById('title_checker_A').style.display='none';
		document.getElementById('title_checker_B').style.display='block';
		}
	}, 10 ) ;
} )
}

Comments

[think49]

SyntaxError: missing ) after argument list が発生しています。投稿したコード「のみ」で検証後、エラーをなくしたコードにして編集をお願いします。

Answer 1

hidden属性

document.getElementById('title_checker_A').style.display='hidden');

hidden属性と勘違いをしているのでしょうか。

document.getElementById('title_checker_A').hidden = true;

• 6.1 The hidden attribute - HTML Standard 日本語訳
• hidden attribute - Can I use...

aria-hidden属性

<i style="display:block" id="title_checker_A" class="fa fa-circle" aria-hidden="true"></i>
<i style="display:none" id="title_checker_B" class="fa fa-check-square" aria-hidden="true"></i>

aria-hidden属性と隠された要素の対応関係が合致していないようです。
aria-hidden属性は要素が隠されている事を表す属性です。

• aria-hidden （ステート） - Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳

ですので、aria-hidden="true" は描画されないようにする必要があるわけですが、このHTMLではaria-hidden="true" でブロックボックスとして描画されることとなり、対応関係がおかしなことになっています。
最もスマートな解決法は「CSSの属性セレクタで制御すること」です。

#title_checker_A, #title_checker_B {
  display: block;
}

[aria-hidden="true"] {
  display: none;
}

[aria-hidden="true"] によって、display: none が適用されるので、aria-hidden属性の値を書き換えるだけで可視/不可視をスイッチさせることが出来ます。

document.getElementById('title_checker_A').setAttribute('aria-hidden', 'true');

更新履歴

• 2017/10/29 15:39 「aria-hidden属性」の節を追記

Re: SugiuraY さん

Comments

[SugiuraY]

コメントありがとうございます。
大変失礼いたしました。displayの使い方を誤っておりました。
よろしくお願い申し上げます。

[think49]

aria-hidden属性の使い方がおかしい事に気が付いたので、親記事に追記しました。

[pegy]

修正

Answer 2

displayにhiddenはないのでnoneでは？

【display - CSS | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/display

Comments

[SugiuraY]

コメントありがとうございます。ご指摘の通りnoneとblockで使い分けるのが正しかったです。