如何创建一个onclick函数来检索HTML上的对象ID，并将ID附加到要获取和使用的API上? &g

Question

我是一个初学javascript的开发者，想做一个网站给招聘人员留下深刻印象。我已经成功地从我的API检索信息，并在我的网站上使用它，这花了我很长时间才弄清楚。现在下一个问题是我如何使一个onclick事件，得到ID硬编码到我的HTML上的特定电影海报，在javascript中使用，以改变API地址，并获得该特定电影的数据。

注意:我有一个模态onclick承载所有的电影数据的模态。

我的Javascript和HTML如下。

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";
}

我试图创建一个函数onclick来获取ID onclick的值，但没有工作。

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

Answer 1

我猜你想让你的函数返回"tt4154796"如果是这种情况，你会想要使用document.querySelector("#imdbID").innerText.

因为使用。value通常用于检索或更改输入字段中的值。