CODEWITHSUNDEEP
javascripthtml
user9152856
user9152856

Reputation: 109

HTML attribute value return to its initial value after changing it by javascript

Suppose I have to image files, one is named redflowers.jpg, and the second is name whiteflowers.jpg

Now I want to create a web page named htmlcss1.html, that initially shows the image of the red flowers :

And it has 2 buttons inside a form : 

<form style="text-align: center;" method=POST action=htmlcss1.html>
    <input type=submit value="red flowers" onClick=f("./redflowers.jpg"); />
    <input type=submit value="white flowers" onClick=f("./whiteflowers.jpg"); />
</form>

When you click the second button, the page shows the image of white flowers instead, and when you click the first button, the page shows the image of red flowers.

In order to do that, I have written a javascript code at the end of the HTML page, that changes the src attribute value of the html tag <img>

<script language = "javascript" type = "text/javascript">
    function f(x) {
        document.getElementById("id1").src = x;
    }
</script>

The problem is, whenever I click the second button (to show white flowers), the image change for a second and shows the white flowers, but then it turns back to show red flower

This is the entire code of the HTML page named htmlcss1.html :

<html>
<head>
    <title> html - css (1) </title>
    <link rel="stylesheet" type="text/css" href=css1.css>

    <script language = "javascript" type = "text/javascript">
        function f(x) {
            document.getElementById("id1").src = x;
        }
    </script>
</head>

<body>

    <center><img id=id1></center>
    <!--<script language = "javascript" type = "text/javascript">
        document.getElementById("id1").src = "./redflowers.jpg";
    </script>-->

    <br/> <br/>

    <form style="text-align: center;" method=POST action=htmlcss1.html>
        <input type=submit value="red flowers" onClick=f("./redflowers.jpg"); />
        <input type=submit value="white flowers" onClick=f("./whiteflowers.jpg"); />
    </form>

</body>
</html>

What must I do?

Upvotes: 1

Views: 272

Answers (4)

sayhelloelijah
sayhelloelijah

Reputation: 25

I believe your problem is occurring because of the form field. Each time you click the submit button. The form submits to the current page causing the page to essentially refresh.

If you're only trying to get the image to switch between two images, I recommend you use two button elements without the form like so:

    <button data-imagesrc="./red-flowers.jpg">red flowers</button>
    <button data-imagesrc="./red-flowers.jpg">white flowers</button>

But if you must use the form tags you'll need to prevent the form from submitting

document.querySelector("form").addEventListener('submit', function(e) {
  e.preventDefault()
});

function f(x) {
  document.getElementById("id1").src = x;
}

Without the form and using buttons:

document.querySelectorAll('button').forEach(function(button) {
  button.addEventListener('click', function() {
    document.getElementById("id1").src = this.dataset.imagesrc;
  });
});

Hope that helps! :)

Upvotes: -1

Quentin
Quentin

Reputation: 943591

You are running the function when you click a submit button.

Submit buttons will submit a form.

Submitting a form will send the form data to the server and load the new page that the server sends back.

If you don't want that, then don't use a submit button!

You can get rid of the form entirely while you are at it since you aren't collecting any data in the first place.

Change:

<form style="text-align: center;" method=POST action=htmlcss1.html>
    <input type=submit value="red flowers" onClick=f("./redflowers.jpg"); />
    <input type=submit value="white flowers" onClick=f("./whiteflowers.jpg"); />
</form>

to:

<input type=button value="red flowers" onClick=f("./redflowers.jpg"); />
<input type=button value="white flowers" onClick=f("./whiteflowers.jpg"); />

Upvotes: 2

symlink
symlink

Reputation: 12209

Because you made the buttons part of a form, so every time they are clicked the form is submitted and the page refreshes. Make them ordinary buttons instead:

function f(x) {
  document.getElementById("id1").src = x;
}
#id1 {
  width: 150px;
  height: 150px;
}
<center><img id=id1>


  <br/> <br/>

  <button onClick="f('http://placekitten.com/150/150');">Red Flowers</button>
  <button onClick="f('http://placekitten.com/140/140');">White Flowers</button>
</center>

Upvotes: 2

apoteet
apoteet

Reputation: 784

What's happening is that the page is refreshing after you click the button, because your type is "submit". Change the type to "button"

Upvotes: 2

Related Questions