投稿获客
广告
广告 广告 广告
广告 广告 广告 广告
广告 █ 推荐【菠萝云】香港16G内存99元 【CDNCloud】极速、安全可靠的加速体验 广告位联系QQ：253000106 【UStat】免费网站统计平台 SSL证书低至2折 单域名36元起 免费测试！海总一手APK免杀处理 广告位联系QQ：253000106 CDN 服务器 反炸 劫持 域名屏蔽 【UStat】专业网站统计平台 域名注册：海量域名快速注册 安卓免杀 谷歌报毒 封装 苹果签名 广告位联系QQ：253000106 【域名被劫持污染如何处理】 安卓免杀★超级签★封装★谷歌屏蔽 广告位联系QQ：253000106

*本站广告为第三方投放，如发生纠纷，请向本站索取第三方联系方式沟通

  1. 创想鸟首页
  2. 好文分享

使用 Pokémon API 创建新页面显示更多信息

程序猿 • • 好文分享 • 阅读 0

使用 pokémon api 创建新页面显示更多信息

本文档将指导您如何使用 Pokémon API，在点击“更多信息”按钮后，将特定 Pokémon 的详细信息展示在一个新的 HTML 页面中。我们将利用 URL 查询参数传递 Pokémon 的 ID，并在新页面中获取并显示这些信息。

通过 URL 查询参数传递 Pokémon ID

为了在新页面中显示特定 Pokémon 的详细信息，我们需要一种方法来告诉 details.html 页面要显示哪个 Pokémon。最常用的方法之一是使用 URL 查询参数。

在 index.html 的 App.js 文件中，修改 seeDetail 函数，将 Pokémon 的 ID 作为查询参数添加到 details.html 的 URL 中：

function seeDetail(id){    window.open('details.html?id=' + id, '_blank');}

现在，当点击“更多信息”按钮时，details.html 页面将在新的标签页中打开，并且 URL 将包含 Pokémon 的 ID，例如：details.html?id=25。

在 details.html 中获取并显示 Pokémon 详细信息

接下来，我们需要在 details.html 页面中获取 URL 查询参数中的 Pokémon ID，并使用该 ID 从 Pokémon API 获取详细信息。

在 details.html 页面中，添加以下 JavaScript 代码：

    
Pokemon Details
    
const moreDetails = document.querySelector(".more-details");function detailsPokemon(poke) {    moreDetails.innerHTML = `        
            ID: ${poke.id}            
${poke.name}
        
    `;}const endPoint = "https://pokeapi.co/api/v2/pokemon/";fetch(endPoint + new URLSearchParams(location.search).get('id'))    .then((response) => response.json())    .then(data => detailsPokemon(data))

这段代码首先获取 more-details 元素的引用，该元素将用于显示 Pokémon 详细信息。然后，定义了一个 detailsPokemon 函数，该函数接收一个 Pokémon 对象并将其详细信息添加到 more-details 元素中。

最重要的是，代码使用 new URLSearchParams(location.search).get(‘id’) 从 URL 查询参数中获取 Pokémon ID。然后，使用该 ID 从 Pokémon API 获取 Pokémon 详细信息，并调用 detailsPokemon 函数来显示这些信息。

完整示例

以下是完整的 index.html 和 details.html 文件：

index.html

    Pokemon List    
        
                    
        
            
        
        
    
            const cardPokemon = document.querySelector("#cardPokemon");        const cardDetalle = document.querySelector('#detalle');        const details = document.querySelector('.more-details');        const btnPokemon = document.querySelector('#btn-pokemon');        const endPoint = "https://pokeapi.co/api/v2/pokemon/";        function showPokemon(poke) {            let tipoDePokemon = poke.types.map((type) => `
${type.type.name}
`);            tipoDePokemon = tipoDePokemon.join('');            let abilitiesPokemon = poke.abilities.map((ability) => `
${ability.ability.name}
`);            abilitiesPokemon = abilitiesPokemon.join('');           const containerPokemon = document.createElement("div");           containerPokemon.innerHTML = `                
                    ${poke.id}                    
                        @@##@@                    
                    
                        
                            
${poke.name}
                            
                                
Tipo de Pokemon:base_experience:                            
                                
${poke.height}m
                                
${poke.weight}kg
                            
                    
                                     
            `;            cardPokemon.append(containerPokemon)        }        function seeDetail(id){            window.open('details.html?id=' + id, '_blank');        }        btnPokemon.addEventListener('click', function() {            for (let i = 1; i  response.json())                .then(data => showPokemon(data))            }        })

details.html

    Pokemon Details    
        
Pokemon Details
        
    
            const moreDetails = document.querySelector(".more-details");        function detailsPokemon(poke) {            moreDetails.innerHTML = `                
                    ID: ${poke.id}                    
${poke.name}
                
            `;        }        const endPoint = "https://pokeapi.co/api/v2/pokemon/";        fetch(endPoint + new URLSearchParams(location.search).get('id'))            .then((response) => response.json())            .then(data => detailsPokemon(data))

总结

通过使用 URL 查询参数，我们能够轻松地将 Pokémon ID 从 index.html 传递到 details.html，并在新页面中显示特定 Pokémon 的详细信息。这种方法简单有效，并且易于理解和实现。 记住要确保你的 details.html 文件能够正确地从 URL 中提取 ID 并使用它来获取数据。

${poke.name}

以上就是使用 Pokémon API 创建新页面显示更多信息的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1513757.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

371.7K 文章
0 评论
1 粉丝
这个人很懒，什么都没有留下～
上一篇 2025年12月20日 07:58:03
下一篇 2025年12月20日 07:58:08

相关推荐

  • Angular表单验证与Material组件样式指南

    本教程深入探讨了Angular应用中常见的两个问题：响应式表单的跨字段验证（以密码确认为例）以及Angular Material组件样式未正确加载的问题。文章详细介绍了如何通过自定义表单组验证器实现复杂的字段间校验逻辑，并提供了确保Material组件样式正确渲染的解决方案，包括模块导入和常见样式配…

    程序猿的头像 程序猿
    好文分享 2025年12月20日
    000
  • Contact Form 7提交后显示感谢弹窗的正确事件处理方法 好文分享

    Contact Form 7提交后显示感谢弹窗的正确事件处理方法

    本文旨在提供在Contact Form 7表单成功提交后显示“感谢弹窗”的正确方法。针对常见的jQuery和原生JavaScript实现方式，详细解释了如何避免在表单验证失败时触发弹窗，并提供了适用于多个表单的解决方案。通过本文，你将学会如何利用wpcf7mailsent事件，结合jQuery或原生…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 在 Discord.js 项目的不同文件中访问 Client 实例 好文分享

    在 Discord.js 项目的不同文件中访问 Client 实例

    本文旨在解决 Discord.js 项目中，如何在不同的模块（如事件处理文件）中访问主程序 index.js 中创建的 client 实例的问题。通常情况下，你无需显式地将 client 实例传递到每个文件中，因为它可以从事件回调函数中直接获取。但如果需要手动传递，本文也将介绍正确的方法和注意事项，…

    程序猿的头像 程序猿
    2025年12月20日
    000

  • javascript闭包怎样实现模板方法

    闭包实现模板方法的核心是利用闭包创建私有作用域，封装算法骨架并允许外部注入具体步骤；2. 相比传统继承，它更轻量、灵活，支持组合优于继承，避免继承链过长；3. 闭包能实现真正的私有状态，增强封装性和健壮性；4. 提供运行时动态创建不同行为实例的能力，适用于多变场景；5. 设计时需明确钩子函数的参数与…

    程序猿的头像 程序猿
    2025年12月20日 • 好文分享
    000
  • Angular响应式表单验证与Material组件样式集成实践 好文分享

    Angular响应式表单验证与Material组件样式集成实践

    本文旨在解决Angular应用中常见的表单验证和Material组件样式问题。我们将深入探讨如何为响应式表单实现自定义密码确认验证，确保错误信息能正确显示，并提供一个通用的自定义验证器模式。同时，文章还将解决Angular Material按钮样式不生效的问题，指出其常见原因——模块导入缺失，并给出…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 在Next.js中动态操作SVG：利用React组件模型实现属性修改与节点添加 好文分享

    在Next.js中动态操作SVG：利用React组件模型实现属性修改与节点添加

    在Next.js应用中，利用React的组件模型来动态修改SVG的属性值（如文本、颜色、位置）和添加新的SVG节点，是实现灵活、高效且符合React范式SVG内容控制的关键。本文将详细讲解这一过程，并提供清晰的代码示例，同时探讨相关注意事项。 挑战：动态SVG内容与SVGR的集成 在使用SVGR等工…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • Angular表单深度指南：解决验证错误与Material组件样式问题 好文分享

    Angular表单深度指南：解决验证错误与Material组件样式问题

    本文深入探讨Angular应用中常见的表单验证和Material组件样式问题。针对密码确认字段不显示自定义错误，我们将介绍如何通过Reactive Forms和自定义验证器实现跨字段验证。同时，针对Angular Material组件样式不生效的问题，文章将详细说明模块导入的重要性，并提供相应的解决…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 动态Flexbox布局与嵌套元素重排教程 好文分享

    动态Flexbox布局与嵌套元素重排教程

    本教程详细阐述如何利用HTML、CSS（Flexbox）和JavaScript实现网页布局的动态切换，包括主容器在垂直和水平方向上的布局转换，以及其中嵌套的输入框组的同步重排。文章通过实例代码演示了如何通过JavaScript动态调整CSS属性，以实现灵活且响应式的用户界面。 在现代web开发中，创…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • Angular Material 表单验证与组件样式指南 好文分享

    Angular Material 表单验证与组件样式指南

    本文深入探讨了Angular Material应用中常见的表单验证和组件样式问题。针对密码确认字段未显示预期验证错误的问题，文章详细介绍了如何通过自定义验证器实现跨字段验证，确保mat-error正确显示。同时，针对Angular Material按钮样式不生效的问题，强调了导入相应模块的重要性，并…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • Next.js 中动态控制 SVG：将静态图形转化为交互式 React 组件 好文分享

    Next.js 中动态控制 SVG：将静态图形转化为交互式 React 组件

    本教程深入探讨了在 Next.js 应用中动态修改 SVG 属性及添加新节点的高效策略。核心思想是将 SVG 结构直接定义为 React 组件，从而能够充分利用 React 的声明式特性。通过 props 和 state，开发者可以轻松地控制 SVG 元素的文本内容、样式、位置等属性，并灵活地按需渲…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 使用Flexbox和JavaScript实现动态布局切换与内部元素重排 好文分享

    使用Flexbox和JavaScript实现动态布局切换与内部元素重排

    本教程详细阐述如何利用CSS Flexbox和JavaScript实现网页布局的动态切换，包括主容器的垂直/水平方向调整，以及内部文本输入框的同步重排。通过精心设计的HTML结构、CSS样式和JavaScript逻辑，我们能够创建一个响应式且用户友好的界面，允许用户根据需求灵活切换内容展示方式，确保…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 在Next.js中动态操作SVG：属性修改与节点添加的专业指南 好文分享

    在Next.js中动态操作SVG：属性修改与节点添加的专业指南

    本文详细介绍了在Next.js应用中动态修改SVG属性值及添加新节点的高效方法。核心策略是将SVG转化为可复用的React组件，利用组件的props和state来灵活控制SVG元素的文本、样式和位置，并实现条件渲染或循环生成新节点，从而避免直接DOM操作的复杂性，提升开发效率和维护性。 引言 SVG…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 如何在模块化Discord.js项目中访问客户端实例 好文分享

    如何在模块化Discord.js项目中访问客户端实例

    在Discord.js机器人开发中，当项目被拆分为多个文件时，从事件处理文件（如guildMemberAdd.js）中访问主客户端实例是一个常见需求。本文将介绍两种主要方法：一是利用事件回调参数自带的client属性，这是推荐且更简洁的方式；二是通过事件监听器显式传递客户端实例，并探讨其潜在的注意事…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 使用Flexbox实现可切换布局的响应式文本框排列 好文分享

    使用Flexbox实现可切换布局的响应式文本框排列

    本教程详细介绍了如何利用CSS Flexbox和JavaScript实现一个动态布局系统，允许用户通过切换按钮在垂直和水平方向上改变容器的排列方式，同时智能地调整内部文本框的布局。文章将展示如何通过修改HTML结构、优化CSS样式和编写JavaScript逻辑，实现容器在列/行方向切换时，文本框能自…

    程序猿的头像 程序猿
    2025年12月20日
    000

  • 浏览器渲染和事件循环之间有什么关系？

    事件循环是浏览器保持响应和更新界面的核心机制，它通过不断检查调用栈和任务队列，在主线程空闲时执行宏任务或微任务；2. 浏览器渲染（包括布局、绘制）也发生在同一主线程上，因此长时间js执行会阻塞渲染；3. 事件循环在每次清空调用栈和微任务队列后，会给予浏览器机会进行渲染更新，从而协调用户交互与页面刷新…

    程序猿的头像 程序猿
    2025年12月20日 • 好文分享
    000
  • Angular 响应式表单错误处理与 Material UI 组件样式集成指南 好文分享

    Angular 响应式表单错误处理与 Material UI 组件样式集成指南

    本教程详细探讨了 Angular 响应式表单中跨字段验证（如密码确认）的正确实现方法，重点解决 mat-error 未按预期显示的问题，并介绍了如何通过自定义验证器在 FormGroup 层面进行有效验证。同时，文章也针对 Angular Material 组件样式不生效的常见问题提供了解决方案，强…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • js怎么实现ajax请求 好文分享

    js怎么实现ajax请求

    实现ajax请求的核心方法有xmlhttprequest和fetch api两种。1. xmlhttprequest适用于需要兼容旧浏览器的场景，支持超时设置、进度监听和请求中止，但基于事件回调的写法较繁琐，易导致回调地狱；2. fetch api是现代标准，基于promise，语法简洁、可读性强，…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • js怎么实现复制到剪贴板 好文分享

    js怎么实现复制到剪贴板

    现代javascript中推荐使用navigator.clipboard.writetext()实现复制，它基于promise、更安全且用户体验更好；2. document.execcommand(‘copy’)常因非用户触发、无选中文本、浏览器兼容性差或安全策略而失败，且已…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • js 如何使用takeWhile从开头获取满足条件的元素 好文分享

    js 如何使用takeWhile从开头获取满足条件的元素

    javascript原生数组没有takewhile方法，1. 因为其设计哲学倾向于保留最基础的操作，而takewhile属于特定函数式编程场景下的非核心功能；2. 社区已通过lodash、rxjs等库提供了更专业、健壮的实现，使语言核心能保持精简；3. takewhile适用于需连续性判断的场景，如…

    程序猿的头像 程序猿
    2025年12月20日
    000

  • javascript如何复制一个数组

    在javascript中复制数组不能直接用等号赋值，因为数组是引用类型，直接赋值只会复制内存地址，导致新旧数组相互影响。1. 使用展开运算符 […originalarray] 是最简洁现代的浅拷贝方法；2. array.from(originalarray) 和 slice() 也能实现…

    程序猿的头像 程序猿
    2025年12月20日 • 好文分享
    000

发表回复

登录后才能评论
关注微信