CODEWITHSUNDEEP
javascripthtmlcss
Keith Lim
Keith Lim

Reputation: 3

Input various text below different images

I'm very new to html, css and javascript. It's been wrecking my mind how I should input text below the images. I couldn't find any solution regarding it. Please share your knowledge with me. So what I want is basically if I click onto 'square' button it will appear a square with a text:square below it. If i click onto a 'circle' button it will appear a circle with a text: circle below the image.

This is my code. What should i Add-on to make it work? 

    <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>

`

Upvotes: 0

Views: 49

Answers (1)

gabriella-varga
gabriella-varga

Reputation: 411

You wrote Java instead of JavaScript in your question, please be more aware :)

Regarding your question, see my example: I also use getElementById just like you did. To manipulate the text I used .innerHTML. If you would like to test the picture part, just remove the //-s from the beginning of the rows in your local setup: those are 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>

Upvotes: 1

Related Questions