Comment afficher une valeur du tableau qui se rapporte à la valeur d'un autre tableau, javascript

J'essaie de faire apparaître le nom avec le score qui se rapporte à ce nom. Donc, si le score le plus élevé est de 98, je souhaite que le nom de Joels s'affiche à l'écran où est indiqué le nom ici.

var names = ["Ben", "Joel", "Judy", "Anne"]; var scores = [88, 98, 77, 88]; var average; var total = 0; var highestScore = 0; var $ = function (id) { return document.getElementById(id); }; var displayResults = function () { for (var i = 0; i < scores.length; i++) { total = total + scores[i]; //both are numbers so adds if (scores[i] > highestScore) { highestScore = scores[i]; } } //then calculate the average and display average = parseInt(total/scores.length); document.getElementById("results_header").innerHTML = ("Results"); document.getElementById("results").innerHTML = ("\nAverage score is " + average + "\nHigh score = Name here with a score of " + highestScore); }; window.onload = function () { //$("add").onclick = addScore; $("display_results").onclick = displayResults; //$("display_scores").onclick = displayScores; }; 

Essayez:

 <html> <head> <style> </style> </head> <body> <p id="results"></p> <button id="display_results">Show</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> var names = ["Ben", "Joel", "Judy", "Anne"]; var scores = [88, 98, 77, 88]; var average; var total = 0; var highestScore = 0; var hightName = ""; function displayResults () { for (var i = 0; i < scores.length; i++) { total = total + scores[i]; //both are numbers so adds if (scores[i] > highestScore) { highestScore = scores[i]; hightName = names[i]; } } //then calculate the average and display average = parseInt(total/scores.length); document.getElementById("results").innerHTML = ("\nAverage score is " + average + "\n High score = " + hightName + " with a score of " + highestScore); }; //$("add").onclick = addScore; $(document).ready(function(){ $("#display_results").click(function(){ displayResults(); }) }) </script> </body> </html> 

Vous avez la valeur i (le positionnement du score dans le tableau des scores). Cette valeur i correspond à la personne dans le tableau des personnes. Utilisez cette valeur i pour sélectionner la personne.

Pour rendre les choses plus faciles, vous pouvez utiliser un objet pour associer le nom (chaîne) au score (int) comme:

  var test = {"Ben": 88, "Joel": 98, "Judy": 77, "Anne": 88} 

Ensuite, vous devriez modifier la boucle for

Comme les tableaux de names et de scores ont la même .length , vous pouvez utiliser la même variable i pour sélectionner l'élément dans le tableau des names comme c'est le cas pour sélectionner l'élément dans les scores .

Déclarer le name variable

 var name = ""; 

name variable de name

 if (scores[i] > highestScore) { highestScore = scores[i]; name = names[i]; } 

Affichage variable

 document.getElementById("results") .innerHTML = "\nAverage score is " + average + "\nHigh score = " + name + " here with a score of " + highestScore; 

Vous pouvez stocker l'index au lieu du score le plus élevé et l'utiliser pour obtenir le nom. J'ai changé votre code pour l'appuyer et ajouté des «Changements» à tous les changements,

  var names = ["Ben", "Joel", "Judy", "Anne"]; var scores = [88, 98, 77, 88]; var average; var total = 0; var highScoreIndex = 0;// Changes var $ = function (id) { return document.getElementById(id); }; var displayResults = function () { for (var i = 0; i < scores.length; i++) { total = total + scores[i]; //both are numbers so adds if (scores[i] > highestScore) { highestScoreIndex = i; // Changes } } //then calculate the average and display average = parseInt(total/scores.length); document.getElementById("results_header").innerHTML = ("Results"); document.getElementById("results").innerHTML = ("\nAverage score is " + average + "\nHigh score = " + names[highestScoreIndex] + " with a score of " + scores[highestScoreIndex]); //Changes }; window.onload = function () { //$("add").onclick = addScore; $("display_results").onclick = displayResults; //$("display_scores").onclick = displayScores; }; 

Ce sont toutes des opérations assez simples à effectuer dans JavScript. J'espère que vous trouvez cette information utile.

J'ai fourni des explications détaillées pour les techniques utilisées dans cette réponse ci-dessous. Tous les extraits peuvent être exécutés dans votre navigateur. Cliquez sur Exécuter l'extrait de code ci-dessous pour voir les résultats.

 // input data var names = ["Ben", "Joel", "Judy", "Anne"] var scores = [88, 98, 77, 88] // this is a common way to sum the numbers in an array var total = scores.reduce(function(x,y) { return x + y }, 0) // average = sum of scores / number of scores var average = total / scores.length // use Math.max to find the highest score var highScore = Math.max.apply(null, scores) // get the name matching the highest score var highScoreName = names[scores.indexOf(highScore)] // output the information to the console // alternative: use innerHTML or something else to print to the DOM console.log("total: %d", total) console.log("average: %d", average) console.log("highest score: %s had %d", highScoreName, highScore) 
 else { names[names.length] = nameInput; 

Convertir en chiffres

ScoreInput = Number (scoreInput);

 scores[scores.length] = scoreInput; 

et

// calculer ensuite le score moyen et le plus élevé

 var displayResults = function () { 

Réinitialiser total

Total = 0;

  for (var i = 0; i < scores.length; i++) { total = total + scores[i]; if (scores[i] > highestScore) { highestScore = scores[i]; name = names[i];