js 在 codepen 中正常运行，但不是 Visual Studio 代码

Question

File names When I run this, the slideshow doesn't appear. Do I need to install anything or am I missing a DOM? When I do open the file in the browser and then open console and enter my js code, the slideshow does appear. Maybe I need to update something or add an ext to vsc? Thank you in advance from this #codenewbie

Also, apparently if you run the snippet here, the slideshow appears. Just not when i run the page from VSC.

 var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; }

 * {box-sizing:border-box} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Hide the images by default */ .mySlides { display: none; } /* Next & previous buttons */ .prev { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */ .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* main image */ head { img: center; border-radius: 50%; } div { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin: 2px; border: 10px dotted coral; } h1 { display: block; font-size: 6em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; color: #ec735e; font-family: verdana; } h2 { display: block; font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold; font-family: sans-serif; color: #7051e4; } h3 { display: block; font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: bold; color: #13572f } h4 { display: block; font-size: 1em; margin-top: 1.33em; margin-bottom: 1.33em; margin-left: 0; margin-right: 0; font-weight: bold; color: #313da4 } body { display: flex; min-height: 100vh; align-items: center; justify-content: center; flex-direction: column; background: rgba(255,199,143,1); background: -moz-radial-gradient(center, ellipse cover, rgba(255,199,143,1) 0%, rgba(253,164,76,1) 47%, rgba(250,125,0,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,199,143,1)), color-stop(47%, rgba(253,164,76,1)), color-stop(100%, rgba(250,125,0,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(255,199,143,1) 0%, rgba(253,164,76,1) 47%, rgba(250,125,0,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(255,199,143,1) 0%, rgba(253,164,76,1) 47%, rgba(250,125,0,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(255,199,143,1) 0%, rgba(253,164,76,1) 47%, rgba(250,125,0,1) 100%); background: radial-gradient(ellipse at center, rgba(255,199,143,1) 0%, rgba(253,164,76,1) 47%, rgba(250,125,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc78f', endColorstr='#fa7d00', GradientType=1 ); }

 <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="recipe.css"> <script src="slideshow" type="text/javascript" href="recipe.js"></script> <title> Coxinha </title> </head> <body> <h1> Coxinha</h1> <div><img src=https://www.thespruceeats.com/thmb/qVPahEB3mHeF2EkEpGtcz8bOJbg=/960x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/coxinha-brazilian-chicken-croquettes-3029668-Hero-5b7d5f9546e0fb00252abc5f.jpg alt="coxinhajpg" width="500" height="333"> </div> <div> <h2>A coxinha is a Brazilian salgadinho or street food. It is similar to a fried dumpling or croquette stuffed with chicken and catupiry, a soft Brazilian cheese. Coxinhas are best served warm while enjoying a beer or as an afternoon treat. <p2> <a href= https://www.thespruceeats.com/coxinha-brazilian-chicken-croquettes-3029668> Recipe & Photo Credit: Marian Blazes</a> </p2> <div> <h3>Ingredients <h3> <h4> <ul> <li>1 1/2 pounds chicken breasts (about 4 halves)</li> <li> 4 to 5 cups of chicken broth </li> <li> 1 carrot </li> <li> 2 onions </li> <li> 2 bay leaves </li> <li> 2 tablespoons butter </li> <li> 2 cloves garlic </li> <li> 1 lime (juiced)</li> <li> 1 (8-ounce) package of Catupiry or softened cream cheese </li> <li> 2 to 3 cups of flour </li> <li> 2 eggs </li> <li> 2 to 3 cups bread crumbs (finely grated) </li> <li> 3 cups vegetable oil (for frying)</li> <li> Dash salt (to taste) </li> <li> Pepper (to taste) </li> </ul></h4></div> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 18</div> <img src="https://www.thespruceeats.com/thmb/YdBFAJeDbYOpqqO8S2wuMVbrgnQ=/1297x0/filters:no_upscale():max_bytes(150000):strip_icc()/coxinha-brazilian-chicken-croquettes-3029668-Ingredients-5bc61b08c9e77c005185d88e.jpg" style="width:100%"> <div class="text">Ingredients</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 18</div> <img src="https://www.thespruceeats.com/thmb/5GJFHWj0Tb-PTyW9tips3RdhTps=/1297x0/filters:no_upscale():max_bytes(150000):strip_icc()/coxinha-brazilian-chicken-croquettes-3029668-Step_1-5bc6171f4cedfd0026659951.jpg" style="width:100%"> <div class="text">Place chicken in pot</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 18</div> <img src="https://www.thespruceeats.com/thmb/icuAblMQ4V8dXUjjFBlcPp8VyQA=/1297x0/filters:no_upscale():max_bytes(150000):strip_icc()/coxinha-brazilian-chicken-croquettes-3029668-Step_2-5bc6175146e0fb0026c92b1d.jpg" style="width:100%"> <div class="text">Add vegetables</div> </div> <div class="mySlides fade"> <div class="numbertext">4 / 18</div> <img src="https://www.thespruceeats.com/thmb/QNS_RKhNSabEqClr5qSmoV_-juc=/1297x0/filters:no_upscale():max_bytes(150000):strip_icc()/coxinha-brazilian-chicken-croquettes-3029668-Step_4-5bc617914cedfd00517da13e.jpg" style="width:100%"> <div class="text">Set chicken aside to cool</div> </div> <div class="mySlides fade"> <div class="numbertext">5 / 18</div> <img src="https://www.thespruceeats.com/thmb/6Td3_d5iq42nD4-BK6BIPm_nRCU=/1297x0/filters:no_upscale():max_bytes(150000):strip_icc()/coxinha-brazilian-chicken-croquettes-3029668-Step_5-5bc618144cedfd00517db8a1.jpg" style="width:100%"> <div class="text">Shred chicken</div> </div> <div class="mySlides fade"> <div class="numbertext">6 / 18</div> <img src="https://www.thespruceeats.com/thmb/2sTQbhoaRvw8lrkNEZQyONHsDa4=/1297x0/filters:no_upscale():max_bytes(150000):strip_icc()/coxinha-brazilian-chicken-croquettes-3029668-Step_6-5bc61841c9e77c0052c791e6.jpg" style="width:100%"> <div class="text">Stir in catupiry and lime</div> </div> <div class="mySlides fade"> <div class="numbertext">7 / 18</div> <img src="https://www.thespruceeats.com/thmb/K_TrPbCZLL7kQStsOwg9NY0RPCE=/1297x0/filters:no_upscale():max_bytes(150000):strip_icc()/coxinha-brazilian-chicken-croquettes-3029668-Step_7-5bc6187c46e0fb0058f39e57.jpg" style="width:100%"> <div class="text">Sauté onions and garlic</div> </div> <div class="mySlides fade"> <div class="numbertext">8 / 18</div> <img src="https://www.thespruceeats.com/thmb/RgV_Y_VSbEM3mcKukLFZV4_uvqU=/4288x2848/filters:no_upscale():max_bytes(150000):strip_icc()/coxinha-brazilian-chicken-croquettes-3029668-Step_8-5bc618cf46e0fb0026c9729d.jpg" style="width:100%"> <div class="text">Add sautéd mixture to chicken</div> </div> <div class="mySlides fade"> <div class="numbertext">9 / 18</div> <img src="https://www.thespruceeats.com/thmb/LogFj9HxruJmPzlsPtNK4p4Jeu4=/4288x2848/filters:no_upscale():max_bytes(150000):strip_icc()/coxinha-brazilian-chicken-croquettes-3029668-Step_9-5bc61914c9e77c0052c7b8f0.jpg" style="width:100%"> <div class="text">Bring chicken broth to a boil and add flour</div> </div> <div class="mySlides fade"> <div class="numbertext">10 / 18</div> <img src="https://www.thespruceeats.com/thmb/zbzt52ij1QQffPbov7_Sklw6Qwk=/1297x0/filters:no_upscale():max_bytes(150000):strip_icc()/coxinha-brazilian-chicken-croquettes-3029668-Step_10-5bc619444cedfd002665f9e8.jpg" style="width:100%"> <div class="text">Stir vigouresly until stiff dough forms and refigerate</div> </div> <div class="mySlides fade"> <div class="numbertext">11 / 18</div> <img src="https://www.thespruceeats.com/thmb/jM9x3b8gb02LjO5Y9xl5QnoWoyE=/1297x0/filters:no_upscale():max_bytes(150000):strip_icc()/coxinha-brazilian-chicken-croquettes-3029668-Step_11-5bc6197646e0fb005156f9bf.jpg" style="width:100%"> <div class="text">Make palm-sized saucers with dough</div> </div> <div class="mySlides fade"> <div class="numbertext">12 / 18</div> <img src="https://www.thespruceeats.com/thmb/cHXdpGUU_Lhv4HSdSXlgY4mocaE=/1297x0/filters:no_upscale():max_bytes(150000):strip_icc()/coxinha-brazilian-chicken-croquettes-3029668-Step_13-5bc619b046e0fb0058f3d4ce.jpg" style="width:100%"> <div class="text">Form ping pong sized balls of chicken filling and form dough around</div> </div> <div class="mySlides fade"> <div class="numbertext">13 / 18</div> <img src="https://www.thespruceeats.com/thmb/5Tzbk9KuDsdqxmteFEP5KfUBefQ=/1297x0/filters:no_upscale():max_bytes(150000):strip_icc()/coxinha-brazilian-chicken-croquettes-3029668-Step_14-5bc619e5c9e77c00513a3f0e.jpg" style="width:100%"> <div class="text">Shape into tear drops</div> </div> <div class="mySlides fade"> <div class="numbertext">14 / 18</div> <img src="https://www.thespruceeats.com/thmb/0xPojXnVYX6zXlnQyRcM9ZrXTp4=/1297x0/filters:no_upscale():max_bytes(150000):strip_icc()/coxinha-brazilian-chicken-croquettes-3029668-Step_15-5bc61a20c9e77c0051021c06.jpg" style="width:100%"> <div class="text">Spread coxinhas on baking sheet</div> </div> <div class="mySlides fade"> <div class="numbertext">15 / 18</div> <img src="https://www.thespruceeats.com/thmb/rOPfozGyeEWbSoeBXcqBPoZuuHM=/1297x0/filters:no_upscale():max_bytes(150000):strip_icc()/coxinha-brazilian-chicken-croquettes-3029668-Step_16-5bc61a5bc9e77c0051887e47.jpg" style="width:100%"> <div class="text">Whisk egg in a bowl and place bread crumbs in shallow pan</div> </div> <div class="mySlides fade"> <div class="numbertext">16 / 18</div> <img src="https://www.thespruceeats.com/thmb/6FS5ESEOMOaVPizYO7jms7vXLnw=/1297x0/filters:no_upscale():max_bytes(150000):strip_icc()/coxinha-brazilian-chicken-croquettes-3029668-Step_17-5bc61a99c9e77c0052c7ffdd.jpg" style="width:100%"> <div class="text">Dip coxinhas in egg and breadcrumbs to coat</div> </div> <div class="mySlides fade"> <div class="numbertext">17 / 18</div> <img src="https://www.thespruceeats.com/thmb/XaxgHTAjiEHsgYLJ6g7HhPtLNW4=/1297x0/filters:no_upscale():max_bytes(150000):strip_icc()/coxinha-brazilian-chicken-croquettes-3029668-Step_18-5bc61ac946e0fb0058f40769.jpg" style="width:100%"> <div class="text">Deep fry until golden brown</div> </div> <div class="mySlides fade"> <div class="numbertext">18 / 18</div> <img src="https://www.thespruceeats.com/thmb/ouozX8OMDVG_f_vNoYYeo7fwthU=/1297x0/filters:no_upscale():max_bytes(150000):strip_icc()/coxinha-brazilian-chicken-croquettes-3029668-Final-5bc61b3b46e0fb0058f41bf6.jpg" style="width:100%"> <div class="text">Serve warm and ENJOY</div> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> <span class="dot" onclick="currentSlide(4)"></span> <span class="dot" onclick="currentSlide(5)"></span> <span class="dot" onclick="currentSlide(6)"></span> <span class="dot" onclick="currentSlide(7)"></span> <span class="dot" onclick="currentSlide(8)"></span> <span class="dot" onclick="currentSlide(9)"></span> <span class="dot" onclick="currentSlide(10)"></span> <span class="dot" onclick="currentSlide(11)"></span> <span class="dot" onclick="currentSlide(12)"></span> <span class="dot" onclick="currentSlide(13)"></span> <span class="dot" onclick="currentSlide(14)"></span> <span class="dot" onclick="currentSlide(15)"></span> <span class="dot" onclick="currentSlide(16)"></span> <span class="dot" onclick="currentSlide(17)"></span> <span class="dot" onclick="currentSlide(18)"></span> </div> </div> <div> <h3> Instructions</h3> <h4> <ol> <li> Place the chicken breasts in a large shallow pot. Cover them with the chicken broth, adding water if necessary to make sure the chicken breasts are covered by at least 1/2-inch of liquid. </li> <li> Add the carrot and one of the onions (peeled and halved) as well as the bay leaves. </li> <li> Bring liquid to a gentle simmer, and cook for 15 to 20 minutes, or until chicken is just cooked through (barely pink in the middle of the thickest part). It's necessary to cut into the chicken to tell when it is done. If some of the breasts cook more quickly, you can remove them earlier. </li> <li> Set chicken aside to cool, and strain the broth. Reserve broth. </li> <li> Shred the chicken into very small pieces. We use a food processor fitted with the plastic blade for this step, but you can also use your fingers or forks.</li> <li> Stir the softened cream cheese and lime juice into the shredded chicken. </li> <li> Finely chop the second onion and the garlic. Sauté the onion and garlic in 2 tablespoons of butter until golden and soft. </li> <li> Add the hot onions and garlic to the chicken mixture and stir until everything is well mixed. </li> <li> Measure the chicken broth (you will probably have about 3 1/2 cups). If you have less than three cups, add more canned chicken broth to make 3 cups. Bring the chicken broth to a boil in a saucepan, and gradually stir in the same amount of flour as you have broth (so if you have 3 1/2 cups broth, add 3 1/2 cups flour). </li> <li> Stir vigorously and cook for 2 to 3 minutes. The mixture will become a stiff dough. Remove from heat and chill in the refrigerator for 1 hour. </li> <li> At this point, you can chill the chicken mixture and the dough for several hours or overnight. </li> <li> To shape the coxinhas, take a piece of the dough, about the size of a golf ball, with floured hands. Roll it into a ball, then hollow out the middle for the filling. </li> <li> Press a golfball-sized (about 1 1/2 tablespoons) piece of the chicken filling inside the ball of dough, and press the dough closed around the filling. </li> <li> Shape into an approximate drumstick shape, flouring hands as necessary. </li> <li> Stand the coxinhas on a baking sheet, so that the pointed end sticks upwards. Continue until you run out of dough or filling. </li> <li> Whisk the eggs together in a bowl. Place the bread crumbs in a shallow pan (like a cake pan) and season with salt and pepper. </li> <li> Dip the coxinhas in the egg, then in the breadcrumbs to coat. Chill the breaded coxinhas for 1 hour. </li> <li> Fill a heavy-bottomed pot with enough oil to cover the coxinhas. Heat the oil to 360 F. Fry the coxinhas in batches until deep golden brown. </li> <li> Serve warm and ENJOY!!!</li> </ol> </h4> </div> <div> <p> For more Salgadinhos Brasileiros, check out these other great recipes</p> <a href= https://www.thespruceeats.com/pao-de-queijo-brazilian-cheese-bread-3028981> Pão de Queijo</a> </p> <a href= https://www.thespruceeats.com/brazilian-risoles-chicken-and-cheese-croquettes-3028876> Risoles de Frango</a> </p> <a href= https://www.thespruceeats.com/kibe-brazilian-beef-croquettes-3029731> Kibe</a> </p> </div> </body> </html>

Answer 1

Your <script> tag need to be

<script src="slideshow.js" type="text/javascript">

considering your js file name is slideshow.js.