为什么单击下一个按钮时不调用 next() function？

Question

单击下一个按钮时，我正在尝试切换图像，但是 onclick 事件侦听器不起作用。 我尝试使用 window.onload() 但这对我也不起作用。

 window.onload = function() { var food = 1; document.getElementById("next").addEventListener("click", next); function next() { food += 1; if (food == 2) { document.getElementById("macarons").innerHTML = "<img class='macarons' src = 'https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fimages.media-allrecipes.com%2Fuserphotos%2F8229090.jpg'>"; } } }

 <h1 class="title">French Cookbook</h1> <img class="macarons" id="macarons" src="https://cakeworkshi.com/wp-content/uploads/2019/11/cakeworkshi_macarons.png"> <img class="back" src="https://storage.needpix.com/rsynced_images/back-24838_1280.png"> <img class="next" id="next" src="http://www.clker.com/cliparts/1/f/a/2/1349807104707654381Next%20Button.svg.hi.png">

任何帮助将不胜感激！