javascript - 在不同图片下方输入各种文字

Question

我对 html、css 和 javascript 很陌生。我一直在思考如何在图像下方输入文字。我找不到任何解决方案。请与我分享你的知识。所以我想要的基本上是如果我点击“方形”按钮，它会出现一个正方形，下面有一个文本:正方形。如果我点击“圆圈”按钮，它会出现一个带有文字的圆圈:图像下方的圆圈。

这是我的代码。我应该添加什么才能使其工作？

    <script>
    function square()
    { 
     document.getElementById("square").src = "square.png";
     }

     function circle()
    { 
     document.getElementById("square").src = "circle.png"; 
     } 
   function triangle() 
    { 
     document.getElementById("square").src = "triangle.png";
    } 

  </script>



  <hr>
  <h2>Part 2</h2>
  <hr>
  <button onClick="square()">square</button>
  <button onClick="circle()">circle</button>
  <button onClick="triangle()">triangle</button>
  <br />
  <img id="square" src="square.png">
  <br />
   Square
  <hr>

`

Answer 1

你在问题​​中写的是 Java 而不是 JavaScript，请多加注意:)

关于你的问题，看我的例子:我也用 getElementById就像你一样。为了操纵我使用的文本 .innerHTML .如果您想测试图片部分，只需从本地设置中的行开头删除//-s:这些是 comments .

    function square() { 
      //document.getElementById("shape").src = "square.png";
      document.getElementById("shapeName").innerHTML= "square";
     }

     function circle() { 
      //document.getElementById("shape").src = "circle.png"; 
      document.getElementById("shapeName").innerHTML= "circle";
     } 
   function triangle() { 
      //document.getElementById("shape").src = "triangle.png";
      document.getElementById("shapeName").innerHTML= "triangle";
    } 

  <hr>
  <h2>Part 2</h2>
  <hr>
  <button onClick="square()">square</button>
  <button onClick="circle()">circle</button>
  <button onClick="triangle()">triangle</button>
  <br />
  <!-- <img id="shape" src="square.png"> -->
  <br />
   <div id="shapeName">Square</div>
  <hr>