Unsplash API与JS/HTML集成问题：搜索失效及显示逻辑异常

核心问题分析与修复方案 #

问题1：搜索输入框无法从API获取图片

存在三个关键错误：

• 变量名拼写错误：创建图片元素时变量定义为const image = document.createElement('img')，但后续赋值时误用了img，导致图片无法加载
• API返回数据路径错误：Unsplash搜索接口的结果列表存储在data.results，而非自定义的data.speakerResults
• 属性名拼写错误：链接文本调用的result.alt_deescription多了一个字母e，正确应为result.alt_description

问题2：“Show more”按钮默认显示

修复方式：初始化时将按钮设置为隐藏，仅在首次搜索完成后再显示。

修正后的完整代码 #

HTML代码（修复闭合标签错误）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Upcoming Events - Tallinn University HCI Hub</title>
</head>
<body>

    <header>
        <h1>Tallinn University HCI Hub</h1>
        <p>Connecting the World of Human-Computer Interaction</p>
    </header>

    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="upcoming-events.html">Upcoming Events</a></li>
            <li><a href="featured-speakers.html">Featured Speakers</a></li>
            <li><a href="meetup-rooms.html">Meetup Rooms</a></li>
            <li><a href="networking-opportunities.html">Networking Opportunities</a></li>
            <li><a href="mentoring-program.html">Mentoring Program</a></li>
            <li><a href="hub-blog.html">Hub Blog</a></li>
        </ul>
    </nav>

    <section class="speakers-container">
        <h2>Featured Speakers</h2>

        <form class="search" >
            <input type="text" id="search-input" placeholder="Search for a presenter">
            <button id="search-button">Search</button>
        </form>

        <div class="speaker-results">
            
            <div class="speaker-result">
                <img src="https://images.unsplash.com/photo-1560523159-4a9692d222ef" alt="Speaker 1 Image">
                <a href="https://unsplash.com/photos/woman-holding-microphone-standing-on-stage-D0rMhzEwiEA" target="_blank">HCI Trends</a> 
            </div>

            <div class="speaker-result">
                <img src="https://images.unsplash.com/photo-1591115765373-5207764f72e7" alt="Speaker 2 Image">
                <a href="https://unsplash.com/photos/people-sitting-on-chair-in-front-of-table-wMRIcT86SWU" target="_blank">User Testing</a> 
            </div>

            <div class="speaker-result">
                <img src="https://images.unsplash.com/photo-1560439514-e960a3ef5019" alt="Speaker 3 Image">
                <a href="https://unsplash.com/photos/mens-black-blazer-DL-yyYDDNX4" target="_blank">Trust in Technology</a> 
            </div>
            
        </div>

        <button id="show-more-button">Show more</button>
    </section>

    <footer>
        <p>&copy; 2023 Tallinn University HCI Hub</p>
    </footer>
    <script src="index.js"></script>
</body>
</html>

JavaScript代码（修复所有功能错误）

const accessKey = "PwYO_lHIYAHEHFxcaI3HjKJrdgYwOUfrCPmN8x7EtDg"

const formEle = document.querySelector("form")
const inputEle = document.getElementById("search-input")
const speakerResults = document.querySelector(".speaker-results")
const showMore = document.getElementById("show-more-button")

// 初始化隐藏Show more按钮
showMore.style.display = "none"

let inputData = ""
let page = 1;

async function searchImages(){
    inputData = inputEle.value;
    const url = `https://api.unsplash.com/search/photos?page=${page}&query=${inputData}&client_id=${accessKey}`

    const response = await fetch(url);
    const data = await response.json();

    // 修正API结果路径
    const results = data.results

    if (page === 1){
        speakerResults.innerHTML = ""
    }

    results.map((result) =>{
        const imageWrapper = document.createElement('div');
        imageWrapper.classList.add("speaker-result");
        const image = document.createElement('img');
        // 修正变量名拼写
        image.src = result.urls.small
        image.alt = result.alt_description
        const imageLink = document.createElement('a');
        imageLink.href = result.links.html 
        imageLink.target = "_blank"
        // 修正属性名拼写
        imageLink.textContent = result.alt_description

        imageWrapper.appendChild(image);
        imageWrapper.appendChild(imageLink);
        speakerResults.appendChild(imageWrapper);
    });

    page++
    if(page > 1){
        showMore.style.display = "block"
    }
}

formEle.addEventListener("submit", (event) => {
    event.preventDefault()
    page = 1;
    searchImages()
})

showMore.addEventListener("click", () => {
    searchImages()
})

内容的提问来源于stack exchange，提问作者Fadzai Emmah Nembaware