JavaScript 什么都不做的Onclick事件

Question

我正在尝试使用 JavaScript 让图像做一些事件。我运行 html 并单击图像似乎没有任何作用。如果有人能在这里帮助我，我会很高兴，谢谢。

HTML:

<html>

<head>
    <title>The Cafe of Pog</title>

<body>
    <h1>Pog Cafe</h1>
    <h2>Select an item!</h2>
    <script src = "js/pogCafe.js"></script>
    <img id = "cake" src = "images/cake.jpg">
    <img id = "soda" src = "images/soda.png">
    <img id = "burger" src = "images/burger.png">
</body>
</head>

</html>

JavaScript:

itemAmount();
function itemAmount() {
    const itemAmount = parseInt(prompt("How many items did you order?"));
    pogCafe(itemAmount);
}

function pogCafe(itemAmount) {
        const burger = document.getElementById("burger");
        const cake = document.getElementById("cake");
        const soda = document.getElementById("soda");
    let loop;
    let total = 0;
    for (loop = 0; loop < itemAmount;) {
        burger.onclick = function burgerClick() {
            const burgerPrice = 2.50;
            total = total + burgerPrice;
            loop++;
        }
        cake.onclick = function cakeClick() {
            const cakePrice = 1.50;
            total = total + cakePrice;
            loop++;
        }
        soda.onclick = function sodaClick(){
            const sodaPrice = 1.00
            total = total + sodaPrice;
            loop++;
        }
    }

Answer 1

你这样做的方式很糟糕。您在 for 循环中附加事件侦听器？不要那样做。以下是解决方案：

<html>
<head>
    <title>The Cafe of Pog</title>
</head>
<body>
    <h1>Pog Cafe</h1>
    <h2>Select an item!</h2>
    <img id = "cake" src = "images/cake.jpg">
    <img id = "soda" src = "images/soda.png">
    <img id = "burger" src = "images/burger.png">  

    <script src = "js/pogCafe.js"></script>
</body>
</html>

let total = 0;  
  
const burgerPrice = 2.50;  
const burger = document.getElementById("burger");  
burger.onclick = function burgerClick() {  
    const amount = parseInt(prompt("How many burgers did you order?"));  
    total = total + burgerPrice*amount;  
}  

const cakePrice = 1.50;  
const cake = document.getElementById("cake");  
cake.onclick = function burgerClick() {  
    const amount = parseInt(prompt("How many cakes did you order?"));  
    total = total + cakePrice*amount;  
}  
  
const sodaPrice = 1.00;  
const soda = document.getElementById("soda");  
soda.onclick = function burgerClick() {  
    const amount = parseInt(prompt("How many sodas did you order?"));  
    total = total + sodaPrice*amount;  
}

Answer 2

首先，您的 HTML 无效，因为 body 元素嵌套在 head 元素中。此外，通过在 body 中的元素之前放置 script 标记，它将在 DOM 中存在这些项目之前执行。而是将 script 移动到结束 body 标记之前。此外，使用现代标准 .addEventListener() 而不是 .onclick 来设置您的事件，以便您可以利用更强大的事件处理框架。

现在这里不需要 prompt 或循环。您需要做的就是将点击商品的价格添加到之前的总价中，并将其更新为新的总价。事实上，您的代码并没有导致图像被点击一定次数，而是导致 click 事件处理程序被配置了一定次数。

您可以采取一些措施来减少下面代码的重复性并减少设置的事件处理程序的数量，但为了使其更易于理解，我未对其进行优化.

// Get references to the elements you'll work with over and
// over just once, not every time the function runs
const burger = document.getElementById("burger");
const cake = document.getElementById("cake");
const soda = document.getElementById("soda");
const output = document.getElementById("output");

// And set up values that will need to be used
// over and over just once as well.
const burgerPrice = 2.50;
const cakePrice = 1.50;
const sodaPrice = 1.00;

// Set up event handlers the modern way, not with .onclick
burger.addEventListener("click", burgerClick);
cake.addEventListener("click", cakeClick);
soda.addEventListener("click", sodaClick);
    
// All you need to do here is add the clicked item's price
// to the previously displayed total
function burgerClick() {
  output.textContent = +output.textContent + burgerPrice;
}   

function cakeClick() {
  output.textContent = +output.textContent  + cakePrice;
}  

function sodaClick() {
  output.textContent = +output.textContent  + sodaPrice;
}

<html>
<head>
    <title>The Cafe of Pog</title>
<!-- You didnt' have the closing head tag in the right place. -->    
</head>
<body>
    <h1>Pog Cafe</h1>
    <h2>Select an item!</h2>

    <img id = "cake" src = "images/cake.jpg">
    <img id = "soda" src = "images/soda.png">
    <img id = "burger" src = "images/burger.png">
    
    <div>Your total is: <span id="output"></span></div>
    
    <!-- The script should be included just before the
         closing body tag so that by the time it is reached
         all the HTML will have been parsed into memory. -->
    <script src = "js/pogCafe.js"></script>    
</body>
</html>

JavaScript 什么都不做的Onclick事件

JavaScript Onclick Event doing nothing

html

javascript

image

onclick

button