从不同的数组中选择随机字符串

Choose random string from different arrays

我有一个带有下拉菜单的表单,其中有一些类别(如 string)。当用户提交表单时,我想显示用户选择的类别中的随机文本,但我不知道该怎么做。

我做了一个类目,后面的类目不知道怎么做。

<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>

是这样的吗?

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>

好吧,如果您想要一种基本的、非数据库的方式来执行此操作,您可以执行如下操作:

  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>

变量 quote 是您显示的内容,变量 category 是用户选择的内容。

我建议使用一个包含引号和适用于它们的任何适用标签的对象数组。由于许多引述可能是有趣、励志、爱国等的结合

你可以使用这样的东西:

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>