Question

我被困在如何用JS编写脚本中，因此当用户单击图像时，它会过渡/变成文本。

我在div中有一个div，因为我必须将其用于滚动动画。因此，当用户滚动到他们想要的图标时，他们可以单击它，它将变成文本，就像当我单击作业图标时，它显示列出的作业。

我尝试使用“ .innerHTML =” Hello World“”，但失败了。

HTML：

https://repo.maven.apache.org

JS：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Underscores</title>
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/jquery-        
 slotmachine@4.0.0/dist/jquery.slotmachine.min.css"></style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js">        
 </script>
<script     
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    
 </script>


</head>
<body>


  <div id= "left" class="left">
<img src="https://s3.amazonaws.com/underscores.xyz/images/left.png" alt="">
  </div>

  <div class="middle" id = "theMiddle" style="width: 400px; height: 300px">
 <div><img     
 src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/About.png"         
 alt="" class="about" id="aboutID"></div>
<div><img 
 src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/job.png" alt=""     
 ></div>
<div><img 
 src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/middle.png" 
 alt=""></div>

  </div>



   <div id= "right" class="right">
    <img src="https://s3.amazonaws.com/underscores.xyz/images/right.png" 
 alt="">
  </div>


  <script src="https://cdn.jsdelivr.net/npm/jquery-    
 slotmachine@4.0.0/dist/slotmachine.min.js"></script>

  <script src="back.js" charset="utf-8"></script>

</body>
</html>

Answer 1

innerHTML是HTML元素的属性，可用于在DOM的指定ID中获取内容。因此，如果我们要更改图像，则将其应用于div标签。

将id赋予包含要更改图像的div标签。

<div id="changetotext"><img src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/About.png" alt="" class="about" id="aboutID"></div>

在js中，将id更改为div标签的ID。

document.getElementById("changetotext").innerHTML = "<p>Hello World</p>";

希望这会有所帮助！

如何将div中的图像替换为文本

1 个答案: