CODEWITHSUNDEEP
javascripthtml
lucp
lucp

Reputation: 11

How do I make the image change when clicking on the button?

This is what I have tried so far and it isn't working. I am trying to make the button show different pictures when clicked on.

<!DOCTYPE html>
<html>
<head>
<header></header>
<link rel="stylesheet" type="text/css" href="C.css">
<body>

<p> <font face="Times New Roman" size=18> Parakeet Images </font> </p>
<img id="parakeet"  src="green_parakeet.jpg" src="blue_parakeet.jpg" />
<button onclick="g()">Show Green!</button>
<script>function g(){document.getElementById('parakeet').src="green_parakeet.jpg;}</script>
<button onclick="b()">Show Blue!</button>
<script>function b(){document.getElementById('parakeet').src="blue_parakeet.jpg;}</script>
</body>
</html>

Upvotes: 0

Views: 210

Answers (3)

DCR
DCR

Reputation: 15700

you are missing closing quotes in both your scripts

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" type="text/css" href="C.css">
   </head>
   <body>
      <p> <font face="Times New Roman" size=18> Parakeet Images </font> </p>
         <img id="parakeet"  src="green_parakeet.jpg" src="blue_parakeet.jpg" />
         <button onclick="g()">Show Green!</button>
         <script>function g(){document.getElementById('parakeet').src="green_parakeet.jpg"}</script>
         <button onclick="b()">Show Blue!</button>
         <script>function b(){document.getElementById('parakeet').src="blue_parakeet.jpg"}</script>
   </body>
</html>

Upvotes: 2

0 x 5 4 4 D
0 x 5 4 4 D

Reputation: 177

You have forgot to close " :

<!DOCTYPE html>
<html>
<head>
<header></header>
<link rel="stylesheet" type="text/css" href="C.css">
<body>

<p> <font face="Times New Roman" size=18> Parakeet Images </font> </p>
<img id="parakeet"  src="green_parakeet.jpg"  />
<button onclick="g()">Show Green!</button>
<script>function g(){document.getElementById('parakeet').src="green_parakeet.jpg";}</script>
<button onclick="b()">Show Blue!</button>
<script>function b(){document.getElementById('parakeet').src="blue_parakeet.jpg";}</script>
</body>
</html>

Upvotes: 2

Avinash Dalvi
Avinash Dalvi

Reputation: 9311

Your code is right only you are missing " after end of image name and there is extra src tag in img element.

function b() {
  document.getElementById('parakeet').src = "https://dummyimage.com/600x400/209de6/fff";
}

function g() {
  document.getElementById('parakeet').src = "https://dummyimage.com/600x400/20e62a/fff";
}
<!DOCTYPE html>
<html>

<head>
  <header></header>
  <link rel="stylesheet" type="text/css" href="C.css">

  <body>

    <p>
      <font face="Times New Roman" size=18> Parakeet Images </font>
    </p>
    <img id="parakeet" src="https://dummyimage.com/600x400/20e62a/fff" />
    <button onclick="g()">Show Green!</button>

    <button onclick="b()">Show Blue!</button>

  </body>

</html>

Upvotes: 1

Related Questions