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。如果要测试图片部分，只需从本地设置的行的开头删除//-即可：即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>

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

1 个答案: