Javascript 如何防止为相同的输入值获取图像？

下面给出的是我的onclick事件处理程序，当我在搜索栏中输入电影名称时，它被触发来搜索电影的图像，因此这里的输入值是电影名称。用于获取电影图像的函数是通过API的TopMovies（）函数

const SearchButton =document.querySelector('#search');
const InputValue = document.querySelector('#input_value');

SearchButton.onclick = function(event){
    event.preventDefault();
    const value = InputValue.value;
    console.log(value);
    const newUrl =multi_search + '&query=' +value; 
    function TopMovies(searched_movies){
        const sectionOfMovies = document.createElement('div');
        sectionOfMovies.classList.add('search_movie_section');
        sectionOfMovies.setAttribute('class','search_movie_section')
        searched_movies.map((searched_movie)=>{
            const img= document.createElement('img');
            const a= document.createElement('a');
            img.src= image_url + searched_movie.poster_path;
            a.appendChild(img);
            sectionOfMovies.appendChild(a);
        
        });
        return sectionOfMovies;
    }
 fetch(newUrl) // fetching the images through API
    .then((res)=>res.json())
    .then((movie_data)=>{
        const searched_movies= movie_data.results;
        const Poster_Block = TopMovies(searched_movies);
        topMovies.append(Poster_Block)
        console.log('movies',movie_data);
        InputValue.value='';
    })
    .catch((error)=>{   
        console.log('err',error)
    }) 
}

上述所有代码都转储到此SearchButton.onclick=函数（事件）中
现在我面临的问题是，如果我第一次点击搜索按钮来搜索一部电影，我将获得该电影的第一次图像。如果我第二次点击搜索按钮。类似地，如果我第三次单击搜索按钮，则对于相同的输入值，共获取3张图像。简言之，对于相同的输入值，只要我单击搜索按钮，图像就会被提取多次。
例如：-如果我搜索电影《狮子王》并点击搜索按钮2次，图像将被提取2次。那么，即使我用相同的输入值“狮子王”点击搜索按钮两次或两次以上，我怎么能一次性获取电影图像呢？。
如何停止多次提取图像？
根据我的说法，对于相同的输入值，图像会被多次提取，这是因为我在

SearchButton.onclick=function（event）

中转储了所有代码。因此，每次单击搜索按钮时都会提取图像。

---

谢谢你的帮助

一个简单的解决方案是在单击按钮后禁用该按钮，并在其响应状态为200或出现错误时启用该按钮。注意：在追加之前清除div的HTML，否则它将追加两次。

单击按钮将其禁用，并在收到响应后重新启用。 记得在点击“搜索”按钮时清除div元素。

---

这样该元素只会有新的结果。

单击“搜索”按钮后如何清除div元素？谢谢你清除div，我解决了问题。请不要复制答案，如果你的答案与另一个人的答案相似，请提及他们的名字。这只是一个善意的请求。。