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="/" + 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=".gif" id="cful">
</body>
</html>
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>
6 Answers
Reset to default 8The 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>
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>
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;
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).
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. :)
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