我不知道为什么当我在我的 HTML 程序上单击“Click = Past”按钮时，绿色字符图像不显示我在可汗学院尝试过

Question

There is supposed to be a green character image when you click "Click = Past" the same one you would see at the start of the program. The character image is most likely to show if you past the code in khan academy, but if you wish not to do that feel free to paste it somewhere else like replit and change the images. This is my first time using buttons I just improvised on some stuff(I did everything correct though and checked my code a million times and can't find anything wrong.). Also this is my first time using stack overflow feel free to tell me if I'm doing something wrong.

My code:

 var leafy = function() { $("img").attr("src", "https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/landscapes/beach-with-palm-trees.png").css("position", "relative").css("top", "0").css("left", "0").css("z-index", "1"); $(".leafers").attr("src", "https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/leafers-ultimate.png").css("position", "absolute").css("top", "210px").css("left", "378px").css("z-index", "3"); $("p").html("Life is to short to waste time,<br> I should have done something with mine.<br> It's too late now. <strong>-Leafers ultimate</strong>").css("background-color", "rgb(0, 255, 230)").css("color", "rgb(0, 0, 0").css("font-family", "Georgia").css("top", "209px").css("left", "148px").css("z-index", "4"); $(".past").text("Click = Past").css("color", "white").css("top", "354px").css("left", "22px").css("z-index", "2"); } var omg = function() { $("img").attr("src", "https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/seasonal/fireworks-over-harbor.png").css("top", "0px").css("left", "0px").css("z-index", "1"); $("img").attr("src", "https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/seasonal/fireworks-over-harbor.png").css("position", "absolute").css("top", "0px").css("left", "0px").css("z-index", "2"); $("p").html("Lets party and have fun.<br> <strong>-Leafers seedling</strong>").css("background-color", "rgb(245, 135, 245)").css("color", "rgb(255, 205, 3)").css("font-family", "cursive").css("z-index", "5"); $("button").text(Click = Future).css("z-index", "4").addClass("Future"); $("button").css("top", "359px").css("left", "22px").css("z-index", "3").addClass("past"); } $(".Future").on("click", function() { console.log("yay"); leafy(); }); $(".past").on("click", function() { console.log("lesss gooo"); omg(); });

 .leafers { position: absolute; top: 210px; left: 378px; z-index: 3; }.seedling { background-color: rgb(245, 135, 245); color: rgb(255, 205, 3); font-family: cursive; font-size: 12px; position: absolute; top: 233px; left: 264px; z-index: 4; }.scape { z-index: 2; }.Future { background-color: red; color: white; position: absolute; z-index: 5; top: 379px; left: 22px; }.past { background-color: rgb(10, 26, 252); color: white; position: absolute; top: 386px; z-index: 1; left: 26px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <img class="scape" src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/seasonal/fireworks-over-harbor.png"> <img src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/leafers-seedling.png" class="leafers"> <p class="seedling"> "Lets party and have fun.<br> <strong>-Leafers seedling"</strong> </p> <button class="Future">Click=Future</button> <button Class="past"></button>

Answer 1

There is a definite error in your code ( Click = Future should be text, so delimited with quotes), but this is not the only problem.

The other problem is that when you set the "past" via JavaScript, you don't use the "leafy" character image, but the fireworks (this counts as a typo, in my opinion).

 function omg() { $(".scape").attr('src', 'https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/seasonal/fireworks-over-harbor.png').css("position", "relative").css("top", "0").css("left", "0").css("z-index", "1"); $(".leafers").attr('src', 'https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/leafers-seedling.png').css("position", "absolute").css("top", "210px").css("left", "378px").css("z-index", "3"); $('.seedling').html('"Lets party and have fun.<br><strong>-Leafers seedling"</strong>').css("background-color", "rgb(0, 255, 230)").css("color", "rgb(0, 0, 0").css("font-family", "Georgia").css("top", "209px").css("left", "148px").css("z-index", "4"); $('.future').text('Click = future') $('.past').text('') } function leafy() { $(".scape").attr("src", "https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/landscapes/beach-with-palm-trees.png").css("top", "0px").css("left", "0px").css("z-index", "1"); $(".leafers").attr("src", "https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/leafers-ultimate.png").css("position", "absolute").css("top", "210px").css("left", "378px").css("z-index", "3"); $(".seedling").html("Lets party and have fun.<br> <strong>-Leafers seedling</strong>").css("background-color", "rgb(245, 135, 245)").css("color", "rgb(255, 205, 3)").css("font-family", "cursive").css("z-index", "5"); $(".future").text("Click = Future").css("z-index", "4").addClass("Future"); $(".past").text("Click = Past").css("top", "359px").css("left", "22px").css("z-index", "3").addClass("past"); } // to get the first setup omg() $(".future").on("click", function() { console.log("yay"); leafy(); }); $(".past").on("click", function() { console.log("lesss gooo"); omg(); });

 html, body { margin: 0; }.leafers { position: absolute; top: 210px; left: 378px; z-index: 3; }.seedling { background-color: rgb(245, 135, 245); color: rgb(255, 205, 3); font-family: cursive; font-size: 12px; position: absolute; top: 233px; left: 264px; z-index: 4; }.scape { z-index: 2; }.future { background-color: red; color: white; position: absolute; z-index: 5; top: 379px; left: 22px; }.past { background-color: rgb(10, 26, 252); color: white; position: absolute; top: 386px; z-index: 1; left: 26px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <img class="scape" src=""> <img class="leafers" src=""> <p class="seedling"></p> <button class="future"></button> <button class="past"></button>

TBH, I would do it totally differently. Considering the use case that I could read from the code and behavior, I'd rather do it more like this (OK, I'd leave jQuery out, but hey, YOLO):

 // utility functions const getImgHtml = ({ src }) => `<img src="${src}" />` const setImgHtml = ({ selector, html }) => jQuery(selector).html(html) const setSceneImg = ({ src, selector }) => { const html = getImgHtml({ src }) setImgHtml({ selector, html }) } // setting the scene function const setScene = ({ bgSrc, charSrc, btnPastShow, btnFutureShow }) => { setSceneImg({ src: bgSrc, selector: ".background" }) setSceneImg({ src: charSrc, selector: ".character" }) jQuery('.btn.past').css('display', btnPastShow) jQuery('.btn.future').css('display', btnFutureShow) } // creating the two different scenes const omg = { bgSrc: 'https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/seasonal/fireworks-over-harbor.png', charSrc: 'https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/leafers-seedling.png', btnPastShow: 'none', btnFutureShow: 'block', } const leafy = { bgSrc: 'https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/landscapes/beach-with-palm-trees.png', charSrc: 'https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/leafers-ultimate.png', btnPastShow: 'block', btnFutureShow: 'none', } jQuery(document).ready(function($) { // loading the first scene setScene(omg) // button click handlers $('.btn.future').on('click', function() { setScene(leafy) }) $('.btn.past').on('click', function() { setScene(omg) }) })

 html, body { margin: 0; }.container { position: relative; height: min-content; }.character { position: absolute; bottom: 30px; right: 30px; }.btn { position: absolute; left: 30px; }.btn.future { bottom: 40px; background: red; color: white }.btn.past { bottom: 55px; background: green; color: white; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="background"></div> <div class="character"></div> <button class="btn future">Future</button> <button class="btn past">Past</button> </div>