JavaScript-仅在单击按钮时显示GIF和文本-堆栈溢出

顺晟科技

2022-10-18 13:41:17

当我点击按钮时，图像不会与文本一起显示，这是我到目前为止所尝试的：

<代码><；！文档类型HTML>；<；HTML Lang=“ en ”>；<；头部>；<；元字符集=“ UTF-8 ”>；<；meta HTTP-equiv=“ X-ua-compatible ” content=“ ie=edge ”>；<；meta name=“ viewport ” content=“ width=device-width，initial-scale=1.0 ”>；<；标题>；文档<；/标题>；<；/标题>；<；样式>；。results，.正在加载{显示：无；}<；/样式>；<；身体>；<；DIV Class=“ container ” style=" margin-left：35%；顶部边距：20%；>；<；button CLASS=“ btn ” onClick=“ displayRoutine（）”>；单击查看我的晨间例行程序<；/button>；<；DIV类=“正在加载”>；<；IMG SRC=“-这里是一个GIF链接”>；<；/DIV>；<；DIV类=“结果”>；<；DIV类=“我”>；<；p style=“ margin-left：50px；”>；这是我起床！<；/p>；<；/DIV>；<；/DIV>；<；/DIV>；<；脚本>；函数displayroutine（）{document.getElementByClassName（' results '）.style.display=' block '；document.getElementByClassName（' loading '）.style.display=' block '；警报（'我'）；}<；/脚本>；<；/正文>；<；/HTML>；

顺晟科技：

1）输入错误：没有<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .results, .loading { display: none; } </style> <body> <div class="container" style="margin-left:35%; margin-top:20%;"> <button class="btn" onclick="displayRoutine()">Click to see me doing my morning routine</button> <div class="loading"> <img src="-here is a GIF link"> </div> <div class="results"> <div class="me"> <p style="margin-left:50px;">This is me getting up!!!</p> </div> </div> </div> <script> function displayRoutine() { document.getElementByClassName('results').style.display = 'block'; document.getElementByClassName('loading').style.display = 'block'; alert('me'); } </script> </body> </html>这样的方法，而是getElementByClassName。

2）getElementsByClassName将返回一个类似数组的数据结构，因此您必须使用getElementsByClassName获取HTML元素引用

index

3）由于HTML中只有一个const result = document.getElementsByClassName( 'results' ); const loading = document.getElementsByClassName( 'loading' ); function displayRoutine() { loading[0].style.display = 'block'; result[0].style.display = "block"; }HTML元素，因此您可以只使用loading为：

querySelector

document.querySelector('.results')

<代码>.结果，.正在加载{显示：无；}

<代码><；DIV类=“容器” style=" margin-left：35%；顶部边距：20%；>；<；button CLASS=“ btn ” onClick=“ displayRoutine（）”>；单击查看我的晨间例行程序<；/button>；<；DIV类=“正在加载”>；<；IMG SRC=“-这里是一个GIF链接”>；<；/DIV>；<；DIV类=“结果”>；<；DIV类=“我”>；<；p style=“ margin-left：50px；”>；这是我起床！<；/p>；<；/DIV>；<；/DIV>；<；/DIV>；

将链接添加到GIF图像并复制粘贴脚本代码以删除输入错误。

<代码><；脚本>；函数displayroutine（）{document.getElementsByClassName（' results '）[0].style.display=' block '；document.getElementsByClassName（' loading '）[0].style.display=' block '；警报（'我'）；}<；/脚本>；

上一篇：JavaScript-使用特定时间范下一篇：HTML-在2列段落中间居中图像-堆

网站建设

Html

JavaScript-仅在单击按钮时显示GIF和文本-堆栈溢出