我试图弄清楚如果输入的是马里奥，如何输出宝马的照片，如果输入的是朱利奥，则输出特斯拉，如果不是这些名称的输出，则要特别注意。所有这些汽车都存储在阵列中。
我一直在尝试使用document.createElement（“ image-example”）;但还没有完成。
<!DOCTYPE html>
<html>
<head>
<title>Tesla Likes Pigeons. And so do other people.</title>
<style>
/* Basic CSS comment */
body {
background: grey;
color: white;
width: 960px;
margin: 0 auto;
font-size: 30px;
color: black;
}
h1 {
font-size: 80px;
color: #333 ;
}
</style>
<script>
/* this is an event */
/* alert("I'm annoying"); */
var username = prompt("Hello, who are you?");
var car = new Array("BMW", "Tesla", "fiat");
if(username==="mario") {
document.write("<h1>Hello " + username + " you won a " + car[0] + "!</h1>");
}
else if(username==="julio") {
document.write("<h1>Hello " + username + " you won a " + car[1] + "!</h1>");
}
else{
document.write("<h1>Hello " + username + " You didn't win a car!</h1>");
}
</script>
</head>
<body>
<img src="tesla.jpg" alt="Nic Tesla">
</body>
</html>
我做了一些更改。例如使用switch and case代替if if。并使用了一些辅助函数将代码分解为大块。
<!DOCTYPE html>
<html>
<head>
<title>Tesla Likes Pigeons. And so do other people.</title>
<style>
body {
background: grey;
color: white;
width: 960px;
margin: 0 auto;
font-size: 30px;
color: black;
}
h1 {
font-size: 80px;
color: #333;
}
</style>
</head>
<body>
<img src="tesla.jpg" alt="Nic Tesla" />
<script>
const name = prompt("Hello, who are you?");
const car = ["BMW", "Tesla", "fiat"];
const h1 = (name, car) => `<h1>Hello ${name} you won a ${car}</h1>`;
const writer = tag => document.write(tag);
switch (name) {
case "mario":
writer(h1(name, car[0]));
break;
case "julio":
writer(h1(name, car[1]));
break;
default:
writer(h1(name, "car"));
}
</script>
</body>
</html>
您可以考虑使用以下方式创建具有相关信息的对象数组：
var username = prompt("Hello, who are you?");
var car = [
{name: 'mario', car: "BMW", image: 'bmw.jpg', alt: 'BMW'},
{name: 'julio', car: "Tesla", image: 'tesla.jpg', alt: 'BMW'},
{name: '', car: "fiat", image: 'fiat.jpg', alt: 'BMW'}
];
var res = car.filter(c => c.name && c.name === username);
var div = document.querySelector('.container');
if(res.length) {
div.innerHTML = "<h1>Hello " + username + " you won a " + res[0].car + "!</h1>";
var img = document.createElement('img');
img.src = res[0].image;
div.appendChild(img);
}
else{
div.innerHTML = "<h1>Hello " + username + " You didn't win a car!</h1>";
}body {
background: grey;
color: white;
width: 960px;
margin: 0 auto;
font-size: 30px;
color: black;
}
h1 {
font-size: 80px;
color: #333 ;
}<div class="container"></div>