如何更改跨度文本并显示div？

Question

I'm trying to create my own alert window that: 1.shows when I click a span that calls the function(). 我试图创建自己的警报窗口：1.单击单击调用function（）的跨度时显示。 2. closes when I click the 'got it' button. 2.单击“获取”按钮时关闭。 3. changes the text of span with the text provided. 3.使用提供的文本更改跨度文本。

But it's not working. 但这不起作用。 It looks fine, but not working. 看起来不错，但不起作用。 Why? 为什么？

I tried making it ID instead of CLASS, making it A... 我尝试将其设置为ID而不是CLASS，将其设置为A ...

<!DOCTYPE HTML>
<HTML>
<HEAD>

</HEAD>
<BODY>
<style> .tooltip:hover {color: green; cursor: pointer; font-weight: bold;}</style>

<!-- the text I click to change the messagebox text-->
<span class="tooltip" onclick="alert_info('INFO')">Static</span>


<!-- the messagebox-->
<div class="popup_info" style=" top: 35%; left: 35%; border-radius: 10px;  border:3px groove #d1ded6; height: 150px;
 width: 400px; position: fixed; background-color: #c5d1c5;    font-size: 16px; font-family: sans-serif; display: none;">
 <br>
 <center><span class="light_it">Information about the clicked button;</span></center><br><br><br><br> 

 <center><button class="close-info"   onclick="this.style.display = none;">Got it</button></center>
</div>
<!--the script that changes the text of the messagebox and shows it to me-->
<script>
function alert_info(text){
//change the span's text:
document.getElementByClassName('light_it').innerHTML = text;
//display the window containing the span of text:
document.getElementByClassName('popup_info').style.display = "block";
}
</script>
</BODY>
</HTML>

I want it to work properly: change the text of the window, show the window and close it when I click the button to close (display:none';). 我希望它能正常工作：更改窗口的文本，显示窗口，然后在单击按钮关闭时关闭它（display：none';）。

Answer 1

You can see why by inspecting the console 您可以通过检查控制台了解原因

You can fix that by replacing 您可以通过替换来解决

document.getElementByClassName('light_it').innerHTML = text; by document.getElementsByClassName('light_it')[0].innerHTML = text; 通过document.getElementsByClassName('light_it')[0].innerHTML = text;

and document.getElementByClassName('popup_info').style.display = "block"; 和document.getElementByClassName('popup_info').style.display = "block"; by document.getElementsByClassName('popup_info')[0].style.display = "block"; 通过document.getElementsByClassName('popup_info')[0].style.display = "block";

Note that you also have an issue on the "close-info" button: onclick="this.style.display = 'none';" 请注意，“关闭信息”按钮上也存在问题： onclick="this.style.display = 'none';" , missing quotes around none ，围绕失踪报价none

如何更改跨度文本并显示div？

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-08-04 17:33:28

如何更改跨度文本并显示div？

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-08-04 17:33:28

解决方案1
1 已采纳 2019-08-04 17:33:28