Sélection de la variable JavaScript et de l'élément de tableau en fonction de l'entrée de l'utilisateur

Question

Je souhaite sélectionner un élément dans un tableau en fonction de l'entrée utilisateur. Un exemple de comment j'ai essayé de faire ceci est ci-dessous. L'utilisateur entrera 1,2 ou 3 (dans cet exemple). Ensuite, en fonction du résultat de cette entrée, l'une des variables a sera sélectionnée. Ensuite, un élément aléatoire de cette variable/tableau sera sélectionné pour être affiché dans la balise de paragraphe.

// user input must be 1,2 or 3 (in this example) 
<input type="number" id="userInput"> 
<script> 
    var ageNum = [0,1,2]; 
    var a1 = ["string1.1","string2.1","string3.1"]; 
    var a2 = ["string1.2","string2.2","string3.2"]; 
    var a3 = ["string1.3","string2.3","string3.3"]; 
    var selectedA = ["a"+userInput.toString()]; 
    var rdnNum = ageNum[Math.floor(Math.random()*ageNum.length)]; 
    document.getElementById("display_string").innerHTML = selectedA[rdnNum]; 
</script> 

<p id="display_string">...</p> 

Ceci est juste un exemple que j'ai essayé (qui a échoué), mais je suis ouvert à toute nouvelle façon d'attaquer le problème.

Answer 1

Essayez cette

var a1 = ["string1.1","string2.1","string3.1"], 
 
    a2 = ["string1.2","string2.2","string3.2"], 
 
    a3 = ["string1.3","string2.3","string3.3"]; 
 

 

 
var input = document.querySelector("input[type=number]"), 
 
inputValue= input.addEventListener("input",function(){ 
 
    var currentValue = this.value; 
 
    if (currentValue >0 && currentValue <4){ 
 
     if(currentValue === 1){ /*a1*/} 
 
     elseif(currentValue === 2){ /*a2*/} 
 
     else(currentValue === 2){ /*a3*/ } 
 
    } 
 
}, false)

<input type="number" id="userInput">

un code plus propre serait

var a1 = ["string1.1","string2.1","string3.1"], 
 
    a2 = ["string1.2","string2.2","string3.2"], 
 
    a3 = ["string1.3","string2.3","string3.3"]; 
 

 
    
 
var input = document.querySelector("input[type=number]"), 
 
inputValue= input.addEventListener("input",function(){ 
 
    var currentValue = this.value; 
 
    if (["1", "2", "3"].includes(currentValue)){ 
 
     
 
     var myArray = "a"+currentValue; 
 
      alert(myArray); 
 
    } 
 
}, false)

<input type="number" id="userInput">

Answer 2

Votre devrait gérer un tableau à deux dimensions à facil y obtenez le message correspondant. Les éléments DOM sont basés sur des événements. Donc, vous devriez utiliser les écouteurs d'événements.

var msgs = [ 
["string1.1","string2.1","string3.1"], // a1 
["string1.2","string2.2","string3.2"], // a2 
["string1.3","string2.3","string3.3"] // a3 
]; 

document.getElementById('userInput').addEventListener('change', function (e) { 
    var selectedArray = msgs[parseInt(e.target.value)]; 
    var randomIdx = parseInt(Math.random() * selectedArray.length); 
    var randomMessage = selectedArray[randomIdx] 
    document.getElementById("display_string").innerHTML = randomMessage 
}); 

Check this fiddle to see my approach