2016-03-25 19 views
1

Bazı kategorilere sahip bir açılır menüye sahip bir formum var (string). Kullanıcı formu gönderdiğinde, kullanıcının seçtiği kategoriden rastgele bir metin görüntülemek istiyorum, ancak bunu nasıl yapacağımı bilmiyorum.Farklı dizilerden rasgele bir dize seçin

Bir kategori için yaptım, ancak sonraki kategoriler için bunu nasıl yapacağımı bilmiyorum.

<script language="JavaScript"> 
<!-- 
var r_text = new Array(); 
r_text[0] = "text1"; 
r_text[1] = "text2"; 
r_text[2] = "text3"; 

var i = Math.floor(3*Math.random()) 
document.write(r_text[i]); 
//--> 
</script> 

cevap

1

bu gibi bir şey?

function select(){ 
 
    var categories = document.getElementById("mySelect").value; 
 
    if(categories == "Funny"){ 
 
    var r_text = new Array(); 
 
    r_text[0] = "funny_text1"; 
 
    r_text[1] = "funny_text2"; 
 
    r_text[2] = "funny_text3"; 
 

 
    var i = Math.floor(3*Math.random()) 
 
    document.getElementById("res").innerHTML = r_text[i]; 
 
    }else if (categories == "Serious"){ 
 
    var r_text = new Array(); 
 
    r_text[0] = "Serious_text1"; 
 
    r_text[1] = "Serious_text2"; 
 
    r_text[2] = "Serious_text3"; 
 

 
    var i = Math.floor(3*Math.random()) 
 
    document.getElementById("res").innerHTML = r_text[i]; 
 
    } 
 
}
<select onchange="select()" name="" id="mySelect"> 
 
    <option>-----</option> 
 
    <option value="Funny">Funny</option> 
 
    <option value="Serious">Serious</option> 
 
</select> 
 

 
<div id="res"></div>

+0

Tamam mükemmel! Bir soru, sonucu nasıl geciktirebilirim? Eğer kategori seçilirse, bir yükleme işareti veya bir şekilde bir gecikme olmalı, bunu nasıl yapabilirim? ;) Teşekkürler! – sooony

+0

evet [setTimeout] ile yapabilirsiniz (https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout). – Gintoki

+0

Gerçekten javascript için yeni, bu yüzden zaman aşımı işlevini nereye yerleştireceğiniz veya nasıl bağlanacağınız hakkında hiçbir fikrim yok ..:/ – sooony

1

istediğiniz Eh eğer aşağıdaki gibi bir şey yapabileceğini bunun için temel olmayan veritabanı yolu:

var funny = ["AHAHAH.", "This is funny.", "Ok, don't judge."]; 
 

 
    var other = ["Quote 1", "Quote 2", "Quote 3"]; 
 

 

 
var category = funny; 
 

 
var quote = category[[Math.floor(Math.random() * category.length)]]; 
 

 
document.getElementById("output").innerHTML = quote;
<div id="output"></div>

Nerede quote değişkeni, görüntülediğiniz şey vedeğişkenidir, kullanıcının seçtiği şey olurdu.

0

Tırnak işaretleri ve bunlara uygulanabilen geçerli etiketleri içeren bir dizi nesneye sahip olmanızı öneririz. Birçok tırnak vb vatansever, komik ilham bir arada, olabilir beri

Böyle bir şey kullanabilirsiniz:

var quotes = [ 
 
    { 
 
     'value': 'Ask Not What Your Country Can Do For You...', 
 
     'tags': ['inspirational', 'patriotic'] 
 
    }, 
 
    { 
 
     'value': 'It Ain\'t Over Till It\'s Over', 
 
     'tags': ['inspirational', 'funny'] 
 
    }, 
 
    { 
 
     'value': '60% Of The Time, It Works Every Time', 
 
     'tags': ['funny'] 
 
    }, 
 
    { 
 
     'value': 'Funny and serious quote', 
 
     'tags': ['funny', 'serious'] 
 
    }, 
 
    { 
 
     'value': 'Inspirational and serious quote', 
 
     'tags': ['inspirational', 'serious'] 
 
    }, 
 
    { 
 
     'value': 'All tags quote 1', 
 
     'tags': ['inspirational', 'serious', 'funny', 'patriotic'] 
 
    }, 
 
    { 
 
     'value': 'All tags quote 2', 
 
     'tags': ['inspirational', 'serious', 'funny', 'patriotic'] 
 
    }, 
 
    { 
 
     'value': 'All tags quote 3', 
 
     'tags': ['inspirational', 'serious', 'funny', 'patriotic'] 
 
    }, 
 
    { 
 
     'value': 'All tags quote 4', 
 
     'tags': ['inspirational', 'serious', 'funny', 'patriotic'] 
 
    } 
 
    
 
     // Etc... 
 
    ]; 
 

 
var getQuoteButton = document.getElementById('get-quote'); 
 

 
function getQuote() { 
 
    
 
    var currentTag, randomIndex, randomQuote; 
 
    
 
    var matchingQuotes = []; 
 
    
 
    var category = document.getElementById('quote-category').value; 
 
    
 
    if (category !== 'all') { 
 
    
 
     // Iterate through list of all quotes 
 
     for (var quoteIndex = 0, quotesLen = quotes.length; quoteIndex < quotesLen; quoteIndex++) { 
 
     
 
      // Iterate through current quote's tags 
 
      for (var tagIndex = 0; tagIndex < quotes[quoteIndex].tags.length; tagIndex++) { 
 
      
 
       currentTag = quotes[quoteIndex].tags[tagIndex]; 
 
      
 
       if (currentTag === category) { 
 
        
 
        // Add matching quotes to array 
 
        matchingQuotes.push(quotes[quoteIndex].value); 
 
       
 
       } 
 
      
 
      } 
 
     
 
     } 
 
     
 
     randomIndex = Math.floor(Math.random() * matchingQuotes.length); 
 
     randomQuote = matchingQuotes[randomIndex]; 
 
     
 
    } 
 
    
 
    else { 
 
     
 
     // If 'All' is selected, choose randomly from all quotes 
 
     randomIndex = Math.floor(Math.random() * quotes.length); 
 
     randomQuote = quotes[randomIndex].value; 
 
     
 
    } 
 
    
 
    document.getElementById('quote').innerHTML = randomQuote; 
 
    
 
} 
 

 
getQuoteButton.onclick = getQuote;
<label>Select A Category 
 
<select name='quote-category' id='quote-category'> 
 
    <option value='all'>All</option> 
 
    <option value='funny'>Funny</option> 
 
    <option value='inspirational'>Inspirational</option> 
 
    <option value='serious'>Serious</option> 
 
    <option value='patriotic'>Patriotic</option> 
 
</select> 
 
<button id='get-quote'>Get Quote</button> 
 
<div id='quote'></div>

İlgili konular