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>My Movie Ratings</title>
</head>
<body>
​
  <h1>My Movie Ratings</h1>
  
  <p>Brief info about my favorite movies.</p>
  
  <h2>Movies</h2>
  
  <div id="movieBox">
      <h3 id="movie">Inside Out</h3>
    <p>An emotional adventure inside the head of a young girl.</p>
      <h4>Actors</h4>
      <ul>
        <li>Amy Poehler</li>
        <li>Bill Hader</li>
      </ul>
      <h4>Directors</h4>
      <ul>
        <li>Pete Doctor</li>
        <li>Ronnie del Carmen</li>
      </ul>
      <div class="controls">
        <select id="rating">
          <option>1</option>
          <option>2</option>
          <option selected>3</option>
          <option>4</option>
          <option>5</option>
        </select>
        <button id="rate">Rate</button>
      </div>
  </div>
  
</body>
</html>
 
// Get Programming with JavaScript
// Listing 18.04
// My Movie Ratings with a drop-down list
​
(function () {
  "use strict";
  
  var rateButton = document.getElementById("rate");
  var ratingList = document.getElementById("rating");
  var movie = document.getElementById("movie");
  
  function rateMovie () {
    var rating = ratingList.value;
    var movieTitle = movie.innerHTML;
    alert("You gave " + movieTitle + " " + rating + " stars!");
  } 
  
  rateButton.addEventListener("click", rateMovie);
  
})();
​
​
​
/* Further Adventures
 *
 * 1) Run the program and rate the movie.
 *
 * 2) Change which rating is automatically
 *    selected in the drop-down list.
 *
 * 3) Add a paragraph element just before
 *    the closing body tag.
 *
 * 4) Change the program so that your rating
 *    is shown in the paragraph rather than
 *    as a pop-up alert.
 *
 */
Output

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

Dismiss x
public
Bin info
jrlarsenpro
0viewers