ランダムなpタグを表示する

Question

私はjQueryを使ったところからやり直しています。代わりにvanilla JSを使いたいと思います。私は達成したいことをよりよく理解するために、作業用のjQueryをコメントアウトしました。

var quotes = document.getElementsByClassName("quotes"); 

document.getElementById("generate").addEventListener("click", function (event) { 
    var random = Math.floor(Math.random() * quotes.length); 
    quotes.style.visibility = "hidden"; 
    quotes[random].style.visibility = "visible"; 
    //$('.quotes').hide().eq(random).show(); 
}); 

コードを実行するときにランダムな段落タグを表示したいとします。どんな助けでも大歓迎です。

Answer 1

quotesで

var quotes = document.getElementsByClassName("quotes"); 

を交換するには、array-likeオブジェクトであり、したがって、style性質を持っていません。

代わりに配列内のそれぞれをループし、visibilityプロパティを変更することができます。

さらに、ループ内の3項演算子を使用して、1項目を表示可能に設定できます。

for(var i = 0; i < quotes.length; i++){ 
    quotes[i].style.visibility = (i==random) ? "visible" : "hidden"; 
} 

は厳密にあなたがVanillaJSにあなたのjQueryの実装をコピーしたい場合、それはあなたがvisibilityなく、変更されなければならないdisplayプロパティです話します。ここ

for(var i = 0; i < quotes.length; i++){ 
    quotes[i].style.display = (i==random) ? "block" : "none"; 
} 

の作業例：あなたはそれをループする必要があるのでhttps://jsfiddle.net/1cog9t3c/1/

---

var quotes = document.getElementsByClassName("quotes"); 
 

 
document.getElementById("generate").addEventListener("click", function (event) { 
 
    var random = Math.floor(Math.random() * quotes.length); 
 
    for(var i = 0; i < quotes.length; i++){ 
 
     quotes[i].style.display = (i==random) ? "block" : "none"; 
 
    } 
 
});

<div class="quotes"> 
 
test 
 
</div> 
 
<div class="quotes"> 
 
test 2 
 
</div> 
 
<div class="quotes"> 
 
test 3 
 
</div> 
 

 
<button id="generate"> 
 
gen 
 
</button>

Answer 2

var quotes=document.getelemetsByid("quotes").innerhtml; 

Answer 3

あなたquotesは、HTMLCollectionあります。

あなたは、配列の各要素に関数を呼び出すためにArray.prototype.forEach.callを使用することができます。

var quotes = document.getElementsByClassName("quotes"); 
 

 
document.getElementById("generate").addEventListener("click", function(event) { 
 
    var random = Math.floor(Math.random() * quotes.length); 
 

 
    Array.prototype.forEach.call(quotes, function(quote) { 
 
     quote.style.visibility = "hidden"; 
 
    }); 
 
    
 
    quotes[random].style.visibility = "visible"; 
 
});

<div class="quotes">quote1</div> 
 
<div class="quotes">quote2</div> 
 
<div class="quotes">quote3</div> 
 
<div class="quotes">quote4</div> 
 

 
<div id="generate"> 
 
    Generate 
 
</div>