Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<form method="get" action="/" onsubmit="return false;">
        <fieldset>
            <label>
                Things to pick from&#8230;<br>
                <div style="font: 12px/1.5 helvetica, sans-serif;">Comma-separated list</div>
                <textarea style="width: 400px;height: 100px;" name="things" id="things">Enter your options here..</textarea>
            </label>
        </fieldset>
    
  <div id="choices"></div>
  
        <p>
            <input type="button" value="Find my Food" onclick="rnd();">
            <img id="ajax-loader" src="ajax-loader.gif" alt="Picking..."
        </p>
    </form>
​
<script type="text/javascript">
  
    // Add default choices here
    var choices = ['apple', 'orange', 'banana', 'kiwi'];
    // cache the choices div
    var choicesDiv = document.getElementById('choices');
    // Add a checkbox for each choice
    choices.forEach(function(choice) {
      choicesDiv.innerHTML += "<input class='things' type='checkbox' value="+choice+" /> " + choice + '<br>';
    });
  
    var rnd = function () {
        var loader, things;
        loader = document.getElementById('ajax-loader');
        loader.style.display = 'inline';
        // Slice the nodelist into a real array, and only store things that are checked
        things = slice(document.getElementsByClassName('things'))
                   .filter(function(a) {return a.checked});
        
        setTimeout(function () {
            var thing;
            loader.style.display = 'none';
            thing = Math.floor(Math.random() * things.length);
            // We're pulling the value stored in the html
            document.getElementById('result').innerHTML = things[thing].value;
        }, 500);
    };
  
    // utility for turning an array-like (like NodeList) object into an array
    function slice(x) {
      return Array.prototype.slice.call(x);
    }
​
    </script>
    <h2>Result:</h2>
    <div id="result">Click &#8220;Find My Colour!&#8221;</div>
    </font><br />
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers