基本Javascript帮助*非常需要*

Question

你好，我是编码的新手，我的JavaScript需要一些帮助。这就是我要做的。 （我很乐意为您提供解释和答案，我确实是在尝试学习。）这是我需要做的。

我需要用它选择的随机汽车显示图像。（选项包括宝马，萨博和玛莎拉蒂。如果您赢得宝马，应该有宝马的照片。）我不知道如何做到这一点，我从未使用过阵列。

非常感谢您的帮助！

    <script>

            var username = prompt("Hello, who are you?");
            var car = new Array("BMW", "Saab", "Maserati");
            console.log(car);

            if(username==="Chris") {
                document.write("<h1>Hello " + username + " you won a " + car[1] + "!</h1>");

            }else if(username === "Sasha") {
            document.write("<h1>Hello " + username + " you won a " + car[1] + "!</h1>");
            }

            else {
                document.write("<h1>Hello " + username + "!");
            }

        </script>

Answer 1

这应该使您开始获得随机的汽车并显示图像。现在，您对Chris和Sasha拥有的东西似乎是正确的（只是没有图像），请尝试对此进行调整，然后您的答案继续。

// can define an array as new Array() or hard bracket syntax
var carImages = [
 // image for BMW
 'https://cdn.motor1.com/images/mgl/PR8w2/s1/bmw-serie-8-2019.jpg',
 // image for Saab
 'https://upload.wikimedia.org/wikipedia/commons/e/e5/Saab_900_GLE_%282%29_%28crop%29.jpg',
 // image for Maserati
 'https://cdn.motor1.com/images/mgl/A8Jkx/s1/maserati-granturismo-zeda.jpg',
];

// The Math.random() function returns a decimal number between 0 - 1 inclusive of 0, but not 1
// So this variable will create a number between 0 - 2. We need zero to two because the 
// zero index is the image for the BMW, 1 is for the Saab, and 2 is for the Maserati.
// Arrays start at 0 for the first element in JavaScript 
var randomIntegerBetweenZeroToTwo = Math.floor(Math.random() * 3);
// display the image on the screen. The src attribute takes the URL of the image and the
// alt attribute is for screen readers or if the image did not load.
document.write('<img src=' + carImages[randomIntegerBetweenZeroToTwo] + ' alt="car"/>');

Answer 2

也许删除if-else语句，因为这些语句无法实现您的目的。他们根据用户输入的名称（而不是您想要的名称）分配汽车。您希望您的程序为用户是谁，从阵列中选择一辆随机汽车。

因此，请尝试使用Math.random（）函数生成一个介于0到数组大小之间的随机数，并将该数字保存在变量中。使用该变量访问数组。

Answer 3

其他人向您展示了如何从数组中选择随机值。这是很好的常规做法，但是当您经常使用随机性时，它就显得有些多余了。 randojs.com使随机内容更容易阅读。使用randojs，从数组中选择一个随机值所需要做的就是说rando(myArray).value而不是myArray[Math.floor(Math.random() * myArray.length)]（它选择一个介于0和1之间的随机十进制乘以数组的长度，然后将其四舍五入结果向下生成一个比数组长度小0到1的数字（从arrays are 0-indexed in JavaScript开始），然后从myArray处的那个索引处获取值）。为了避免JavaScript中通常伴随随机性带来的少量复杂性，使用randojs所需要做的就是在HTML文档的head标签中包含以下内容：

<script src="https://randojs.com/1.0.0.js"></script>

然后您可以在脚本中使用它，如下所示：

var username = prompt("Hello, who are you?");

//carArrays is an array of arrays. each nested array holds a car name at index 0 and a car photo url at index 1
var carArrays = [
  ["BMW", "https://upload.wikimedia.org/wikipedia/commons/6/64/2017_BMW_340i_%28F30_LCI%29_Luxury_Line_sedan_%282018-07-30%29_01.jpg"], 
  ["Saab", "https://upload.wikimedia.org/wikipedia/commons/5/5d/Saab_9-3_Mk2_.jpg"],
  ["Maserati", "https://upload.wikimedia.org/wikipedia/commons/1/15/2018_Maserati_GranTurismo_Sport_Automatic_4.7_Front.jpg"]
];

//check usernames for Chris or Sasha, using .toLowerCase() so we can effectively ignore capitalization or the lack thereof
if(username.toLowerCase() === "chris" || username.toLowerCase() === "sasha"){
  //pick a random nested array from carArrays
  var randomCarArray = rando(carArrays).value;
	
  //and write to the page
  document.write("<h1>Hello " + username + " you won a " + randomCarArray[0] + "!</h1><img src='" + randomCarArray[1] + "'/>");
}
else{
  //just say hello
  document.write("<h1>Hello " + username + "!");
}

/*give the images a width so they're not huge*/
img{
  width:300px;
}

<script src="https://randojs.com/1.0.0.js"></script>