title: Displaying two values from two different arrays
body: <p>I need to display the highest test score out of one array and the person who received that score from another array. Here is the code so far:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var names = ["Ben", "Joel", "Judy", "Anne"];
  var scores = [88, 98, 77, 88];
  var textDisplay;
  
  var $ = function(id) {
    return document.getElementById(id);
  }
  
  var listArray = function() {
    $("results").value = "";
    for (var i = 0; i &lt; names.length; i++) {
      $("results").value += names[i] + ", " + scores[i] + "\n";
    }
  }
  
  var showBest = function() {
    $("results").value = "";
    $("results").value += "High Score = " + Math.max.apply(null, scores) + "\n";
    $("results").value += "The highest scoring student is = " //here is where I need help
  }
  var addElement = function() {
    $("results").value = "";
    // get user entries
    var name = $("name").value;
    var score = parseInt($("score").value);
  
    // check entries for validity
    if (name == "" || isNaN(score) || score &lt; 0 || score &gt; 100) {
      alert("You must enter a name and a valid score");
    } else {
      names[names.length] = $("name").value;
      scores[scores.length] = parseInt($("score").value);
      $("name").value = "";
      $("score").value = "";
    }
    $("name").focus();
  }
  window.onload = function() {
    $("list_array").onclick = listArray;
    $("add").onclick = addElement;
    $("show_best").onclick = showBest;
    $("name").focus();
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;label for="name"&gt;Name:&lt;/label&gt;
    &lt;input type="text" id="name"&gt;&lt;br&gt;
  
    &lt;label for="score"&gt;Score:&lt;/label&gt;
    &lt;input type="text" id="score"&gt;&lt;br&gt;
  
    &lt;label&gt;&amp;nbsp;&lt;/label&gt;
    &lt;input type="button" id="add" value="Add to Array"&gt;&lt;br&gt;
  
    &lt;h2&gt;Results&lt;/h2&gt;
    &lt;textarea id="results"&gt;&amp;nbsp;&lt;/textarea&gt;&lt;br&gt;
    &lt;input type="button" id="list_array" value="List Array"&gt;&lt;br&gt;
    &lt;input type="button" id="show_best" value="Show Best Score"&gt;&lt;br&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Is there any way to combine the arrays so they associate with each other? Even then I wouldn't know how to display the student separately from the score. Ideally hitting the &quot;show_best&quot; button would show the highest score and the name of the student who received that score.</p>