JavaScriptで条件分岐をする方法 document.getElementsByClassName('')

Question

JavaScriptを利用して、特定条件の場合は　document.write('小文字')　違う場合は'大文字'

と表示したい場合のコードを記述してみました。

<script>
	var test = document.getElementsByClassName('membership member_group')
	
	if(test = true){
		document.write('sns')
	}else{
		document.write('SNS')
	}
</script>

HTML上のクラスで membership member_groupがある場合には、snsと表示され
ない場合には　SNS　と表示するとしてみたのですが、

sns　と表示されてしまいます。

どのように記述すれば上記のようになるでしょうか。
ご教示の程よろしくおねがいします。

Answer 1

document.write('sns')

document.writeは基本的に使ってはいけません

if(test = true){

これはtest変数にtrueを投入しているだけです
この式だとなにがあってもtrueで評価されます

仮にif(test === true){、で評価したとしてもおかしいです
testはdocument.getElementsByClassNameで得られた
HTMLCollection(もしくはnull)ですのでtrueと比較してはいけません。

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  var test = document.getElementsByClassName('membership member_group');
  console.log(test);
  if(test){
    console.log('sns');
  }else{
    console.log('SNS');
  }
});
</script>

<div class="membership">membership1</div>
<div class="member_group">member_group1</div>
<div class="membership member_group">membership member_group1</div>
<div class="membership">membership2</div>
<div class="member_group">member_group2</div>
<div class="membership member_group">membership member_group2</div>

ちょっとわかりやすく

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  var test = document.getElementsByClassName('membership member_group');
  var txt="";
  if(test){
    txt="sns";
  }else{
    txt="SNS";
  }
  document.querySelector('#result').value=txt;
});
</script>

<div class="membership">membership1</div>
<div class="member_group">member_group1</div>
<div class="membership member_group">membership member_group1</div>
<div class="membership">membership2</div>
<div class="member_group">member_group2</div>
<div class="membership member_group">membership member_group2</div>

result:<input type="text" id="result">

結果をpに

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  var test = document.getElementsByClassName('membership member_group');
  var txt="";
  if(test.length>0){
    txt="sns";
  }else{
    txt="SNS";
  }
  document.querySelector('p').textContent=txt;
});
</script>

<div class="membership">membership1</div>
<div class="member_group">member_group1</div>
<div class="membership member_group">membership member_group1</div>
<div class="membership">membership2</div>
<div class="member_group">member_group2</div>
<div class="membership member_group">membership member_group2</div>
<hr>
result:<p></p>

Comments

[mon1992]

ご丁寧にありがとうございます。

しかしJavaScriptを初めて触ったレベルなので、この記述がどのような過程でどうなるのかが理解できておりません。

[yambejp]

> JavaScriptを初めて触ったレベル

いちおう少しわかりやすく書いておきました
わからない箇所があれば具体的に指摘ください

[mon1992]

window.addEventListener('DOMContentLoaded', ()=>{
何をしているかわかりません

var test = document.getElementsByClassName('membership member_group');
testに取得したクラス名を代入している

var txt="";
引数を定義している

if(test){
txt="sns";
}else{
txt="SNS";
}
testがtrueだった場合は 引数txtにsnsを代入する
falseだった場合は、SNSを代入する

document.querySelector('#result').value=txt;
何をしているかわかりません

result:<input type="text" id="result">
何をしているかわかりません

各箇所のわかる場所と(わかっているつもりになっていると思うので、違う場合はご指摘お願いします。)わからない場所をあげます。

どうぞよろしくおねがいします。

[yambejp]

> window.addEventListener('DOMContentLoaded’

スクリプトとhtmlを分けるための処理です。
htmlが読み込まれてから処理をはじめましょうというおまじないだと思ってください
（これを指定しないと、スクリプトを先頭に持っていけません）

> testがtrueだった場合

ちょっとちがいます
testがnullやfalseや0など、「偽」状態ではない場合・・・という意味です。
かりに合致するクラスがない場合はtestはlength=0のHTMLCollectionになるので
それも偽状態です

ちゃんと書くなら「if(test.length>0)」としたほうがわかりやすいかもしれません

> document.querySelector('#result').value=txt;

resultというidのHTML要素（この場合はinput）のvalueにsns/SNSを入れて表示してます
input要素はvalue変更すると表示が変更されます

> result:<input type="text" id="result">

ただのinputタグです。本当にわからないならhtmlの基礎から勉強をはじめてください

[mon1992]

inputで表記していますが、<p>sns</p>　と表示することはできないのでしょうか。

[yambejp]

> <p>sns</p>　と表示することはできないのでしょうか。

追記しておきました