how to change attribute in html using javascript

Question

This is my code, so how can i change the width attribute?

<html>
<head>
<script type="text/javascript">
 document.getElementById("cpul").src="hello.jpg";
</script>
</head>
<body>

<img src="hi.jpg" width="100" height="100" id="cpul">

</body>
</html>

The above is fail and the image no change at all!!

But why when i use this code(copy from other site), the image is change

<html>
<head>
<title>JS DD Function</title>
<script type="text/javascript">
    function jsDropDown(imgid,folder,newimg)
 { 
 document.getElementById(imgid).src="http://www.cookwithbetty.com/" + folder + "/" + newimg + ".gif";
 }
</script>
</head>
<body>
<table>
  <tr>
    <td>
Foods: <select name="food" onChange="jsDropDown('cful','images',this.value)">
       <option value="steak_icon">Steak</option>
    <option value="salad_icon">Salad</option>
    <option value="bread_icon">Bread</option>
    </select><br />
     </td>
  <td>
         <img src="http://www.cookwithbetty.com/images/steak_icon.gif" id="cful">

</body>
</html>

tvanfosson · Accepted Answer · 2010-12-27 13:33:11Z

8

The most likely reason that your code is not working is that it is being executed before the element exists in the DOM. You should set your code up to run on the window load event or place it at the end of the document to ensure that the element exists before you try to access it.

<html>
<head>
   <title>Foo</title>
</head>
<body>

<img src="hi.jpg" width="100" height="100" id="cpul">
<script type="text/javascript">
   document.getElementById("cpul").src="hello.jpg";
</script>
</body>
</html>

answered Dec 27, 2010 at 13:33

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dramasea Over a year ago

can we change any attribute such as width, height etc..?

tvanfosson Over a year ago

@dramasea - yes, though you should probably use style (CSS) properties or classes instead for consistency.

Mads Mogenshøj · Accepted Answer · 2010-12-27 13:58:26Z

2

Put in in the onload event for the window, so the code does not execute before the image html code has loaded. And use the width attribute to set width.

<html>
  <head>
    <title>Change my image width</title>
    <script type="text/javascript">
      window.onload = function() {
        var myImage = document.getElementById("cpul");
        myImage.src = "hello.jpg";

        // change width
        myImage.width = 200;
      };
    </script>
  </head>
  <body>
    <img src="hi.jpg" width="100" height="100" id="cpul"> 
  </body>
</html>

edited Dec 27, 2010 at 13:58

answered Dec 27, 2010 at 13:34

Mads Mogenshøj

2,0581 gold badge16 silver badges23 bronze badges

Comments

Jan Hančič · Accepted Answer · 2010-12-27 13:32:34Z

0

You are trying to access a DOM element when that element is not yet created. Move your script tag to the bottom of the page (just before the closing body).

As for "changing the width of the image". Once you get the image (via document.getElementById), just set it's width property:

var myImg = document.getElementById ( 'imgsid' );
myImg.width = 100;

answered Dec 27, 2010 at 13:32

Jan Hančič

54k17 gold badges99 silver badges101 bronze badges

Comments

Quentin · Accepted Answer · 2010-12-27 13:33:37Z

0

In your first example, the JavaScript is executing immediately. At this stage, the document is still be parsed and no element with the specified id exists in the DOM.

In the second example, the JavaScript is executing in response to a change event, which won't fire until the element exists (well, not unless someone is very very quick with the mouse).

You need to delay the JavaScript call until after the element exists by either:

Moving the <script> to after the <img>
Changing the script so it defines a function, and then calling that function in response to an event (such as load).

answered Dec 27, 2010 at 13:33

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

user447356 · Accepted Answer · 2010-12-27 13:41:46Z

0

You mentioned width, if you're after resizing the image only if it's bigger than some specific width, you can use the onload event of the image itself:

<img src="hi.jpg" id="cpul" onload="if (this.width > 100) this.width = 100;" />

This will resize the image to 100 pixels width (and respective height) only if it's bigger than 100 otherwise it won't change anything, i.e. it will make the image smaller but not bigger.

If you meant changing the image source via code the other answers are all you need. :)

answered Dec 27, 2010 at 13:41

user447356

Comments

Niklas · Accepted Answer · 2022-11-07 12:43:42Z

0

Possible solution would be the element.setAttribute("class", "democlass");

Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.

You can read more about it on developer.mozilla

answered Nov 7, 2022 at 12:43

Niklas

1,30920 silver badges36 bronze badges

Collectives™ on Stack Overflow

how to change attribute in html using javascript

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related