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

how to set default value in textbox in html using javascript
html input default value if empty
which attribute prefills a default value for an input element in html5
how to set default value in textbox in html using jquery
how to set default value in input type=number in html
html <textarea default value
how to set default value for input type=file in html
javascript set input value

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?

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"); />

HTML DOM Input Text defaultValue Property, of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. The defaultValue property sets or returns the default value of a text field. Note: The default value is the value specified in the HTML value attribute. the default value, while value contains the current value after some changes have� <input>: When the value attribute is present, it specifies the initial value of the input element. It has a different meaning for different input type: When present in “button”, “reset” and “submit” it specifies the text on the button.

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

Element.setAttribute(), The first call to setAttribute() above shows changing the name attribute's value to "helloButton". You can see this using your browser's page� Definition and Usage. The setAttribute() method adds the specified attribute to an element, and gives it the specified value. If the specified attribute already exists, only the value is set/changed.

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>

defaultValue property (input, textarea, ) JavaScript, Specifies or returns the initial value of the object. The initial state can be set with the value attribute in HTML. If you want to get or set the current value of an� Definition and Usage. The getAttribute() method returns the value of the attribute with the specified name, of an element. Tip: Use the getAttributeNode() method if you want to return the attribute as an Attr object.

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! :)

Declared Properties, Updates the corresponding attribute value when the property value changes. The properties object supports the following keys for each property: function, the function is invoked and the return value is used as the default value of the property. If the property value is Boolean, the attribute is created as a standard HTML� The next list items will increment from that value. For <meter> elements, the value attribute specifies the current value of the gauge. For <progress> elements, the value attribute specifies how much of the task has been completed. For <param> elements, the value attribute specifies the value of the parameter.

Properties – LitElement, Whether property value is reflected back to the associated attribute. An empty options object is equivalent to specifying the default value for all options. import {LitElement, html} from 'lit-element'; class MyElement extends LitElement { static get properties() When a property changes, the following sequence occurs:. JavaScript JavaScript Reference HTML DOM Reference jQuery Reference AngularJS Reference W3.JS Reference Return the attribute value. Before changing the style:

Basic Data Types and Interfaces — SVG 2, The initial value of an attribute or property is the value used when that attribute or The SVG DOM follows similar naming conventions to HTML and DOM standards ([HTML], [DOM]). For example, a property that returns document meta information such as the date the file On setting value, the following steps are run:. The value property sets or returns the value of the value attribute of a checkbox. For checkboxes, the contents of the value property do not appear in the user interface. The value property only has meaning when submitting a form.

.prop(), The .prop() method gets the property value for only the first element in the matched set. It returns undefined for the value of a property that has not been set, or if the change the type property (or attribute) of an input element created via HTML checked attribute value does not change with the state of the checkbox, while� To set the value of a Boolean attribute, such as disabled, you can specify any value. An empty string or the name of the attribute are recommended values. All that matters is that if the attribute is present at all, regardless of its actual value, its value is considered to be true. The absence of the attribute means its value is false.

Comments
  • You are posting back to the same page so it is reloading to the original state. Don't use a form, you aren't passing data to the page. Just use buttons and handle the click events.
  • Down vote? Could you explain what's wrong with the code please?