如何实现点击事件获取HTML元素ID并用于API请求？

问题描述 #

我是一名JavaScript新手开发者，正在制作网站以吸引招聘者。我已成功从API获取信息并在网站上使用，但现在遇到问题：如何实现点击事件，获取HTML中电影海报上硬编码的imdbID，在JavaScript中修改API地址以获取该电影的对应数据，并在模态框中展示。我尝试编写getimdbID函数但未成功，以下是我的代码：

HTML代码 #

<div class="poster" onclick="toggleModal(); getimdbID()" id="tt4154796">
    <div id="imdbID">tt4154796</div>
    <img
        src="https://m.media-amazon.com/images/M/MV5BMTc5MDE2ODcwNV5BMl5BanBnXkFtZTgwMzI2NzQ2NzM@._V1_SX300.jpg"
        alt=""
        class="poster__img"
    />
    <p class="movie__title">Avengers: Endgame</p>
    <p class="year">2019</p>
</div>

JavaScript代码 #

async function getMovie() {
    const movies = await fetch(`https://www.omdbapi.com/?i=tt4154796&apikey=4148fa0f`);
    const movieData = await movies.json();
    const  { Title, Year, Runtime, Genre, Director, Actors, Plot, Awards, Poster, Metascore, imdbRating, imdbVotes, BoxOffice } = movieData

    document.getElementById('title').textContent = Title;
    document.getElementById('year').textContent = Year;
    document.getElementById('genre').textContent = Genre;
    document.getElementById('runtime').textContent = Runtime;
    document.getElementById('plot').textContent = Plot;
    document.getElementById('director').textContent = Director;
    document.getElementById('actors').textContent = Actors;
    document.getElementById('awards').textContent = Awards;
    document.getElementById('metascore').textContent = Metascore;
    document.getElementById('boxoffice').textContent = BoxOffice;
    document.getElementById('imdbRating').textContent = imdbRating;
    document.getElementById('imdbVotes').textContent = imdbVotes;
    document.getElementById('poster').src = Poster;
}

getMovie()

// ToggleModal
let isModalOpen = false;

function toggleModal() {
    if(isModalOpen) {
        isModalOpen = false;
        return document.body.classList.remove("modal--open");
    }
    isModalOpen = true;
    document.body.classList += " modal--open";
}

尝试的getimdbID函数 #

function getimdbID() {
    let x = document.querySelector("#imdbID").value
    console.log(x)
}

问题分析与解决方案 #

1. 原getimdbID函数的核心问题 #

div元素不存在value属性，使用.value无法获取内容，需改用textContent或innerText。此外，若页面存在多个电影海报，重复的id="imdbID"会违反DOM唯一ID规则，实际上海报容器的id本身就是imdbID，直接读取该值更高效。

2. 优化HTML结构 #

整合点击事件，传递当前海报元素，避免重复ID问题：

<div class="poster" onclick="handlePosterClick(this)" id="tt4154796">
    <img
        src="https://m.media-amazon.com/images/M/MV5BMTc5MDE2ODcwNV5BMl5BanBnXkFtZTgwMzI2NzQ2NzM@._V1_SX300.jpg"
        alt="Avengers: Endgame"
        class="poster__img"
    />
    <p class="movie__title">Avengers: Endgame</p>
    <p class="year">2019</p>
</div>

3. 修改JavaScript代码 #

• 重构getMovie函数，使其接受imdbID参数，实现动态请求
• 编写统一的点击处理函数，同步完成imdbID获取、数据加载与模态框打开
• 优化模态框状态切换逻辑，使用classListAPI提升代码健壮性

// 重构为可复用的动态电影数据加载函数
async function getMovie(imdbID) {
    try {
        const response = await fetch(`https://www.omdbapi.com/?i=${imdbID}&apikey=4148fa0f`);
        const movieData = await response.json();
        
        const { Title, Year, Runtime, Genre, Director, Actors, Plot, Awards, Poster, Metascore, imdbRating, imdbVotes, BoxOffice } = movieData;

        document.getElementById('title').textContent = Title;
        document.getElementById('year').textContent = Year;
        document.getElementById('genre').textContent = Genre;
        document.getElementById('runtime').textContent = Runtime;
        document.getElementById('plot').textContent = Plot;
        document.getElementById('director').textContent = Director;
        document.getElementById('actors').textContent = Actors;
        document.getElementById('awards').textContent = Awards;
        document.getElementById('metascore').textContent = Metascore;
        document.getElementById('boxoffice').textContent = BoxOffice;
        document.getElementById('imdbRating').textContent = imdbRating;
        document.getElementById('imdbVotes').textContent = imdbVotes;
        document.getElementById('poster').src = Poster;
    } catch (error) {
        console.error('加载电影数据失败:', error);
    }
}

// 模态框状态管理
let isModalOpen = false;

function toggleModal() {
    isModalOpen = !isModalOpen;
    document.body.classList.toggle("modal--open");
}

// 统一处理海报点击事件
function handlePosterClick(posterElement) {
    // 从海报容器的id直接获取imdbID
    const imdbID = posterElement.id;
    // 加载对应电影数据
    getMovie(imdbID);
    // 打开模态框
    toggleModal();
}

4. 方案优势 #

• 点击事件直接传递当前元素，无需额外DOM查找，更高效且避免ID冲突
• getMovie成为通用函数，可复用加载任意imdbID的电影数据
• 使用classList.toggle简化模态框状态切换，代码更简洁可靠
• 添加try/catch捕获请求错误，增强代码健壮性

内容的提问来源于stack exchange，提问作者Tommy Nguyen