Changing HTML image size with Javascript [duplicate]

Question

So I am trying to create a select menu for changing the size of an image but I have no idea whats wrong with this piece of code or how to fix it.

HTML:

<img id="dogpicture" src="dog1.png" alt="dog" height="150" width="150"></img>

<select id="dogsize" name="sizeofdog" onchange="dogsize(this.value);">
    <option value="small"> small </option>
    <option value="default" selected> default </option>
    <option value="big"> big </option>
</select>

JS:

function dogsize(option){
    if (option == "small"){
        document.getElementById('dogpicture').height = "50";
        document.getElementById('dogpicture').width = "50";
    }
    if (option == "default"){
        document.getElementById('dogpicture').height = "100";
        document.getElementById('dogpicture').width = "100";
    }
    if (option == "big"){
        document.getElementById('dogpicture').height = "150";
        document.getElementById('dogpicture').width = "150";
    }
}

They should be numbers. Not values. Remove the ". Or add px at the end, if you are gonna send as strings. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Dec 4, 2016 at 23:22
You could have mentioned that in your question. Don't use the exact phrase "it doesn't work at all" – be explicit and say "nothing happens, no errors, no change on screen". — Jongware
– Jongware, Commented Dec 4, 2016 at 23:44

Jecoms · Accepted Answer · 2016-12-04 23:43:49Z

0

Seems to be working fine. The only change I made was to fix the img tag to a void tag (and I included a link to a dog picture).

You are directly changing the element height/width, but you can also change the style attribute's height/width.

If there is other code affecting the image or dropdown, then it needs to be looked at as well.

// original function
function dogsize(option){
    if (option == "small"){
        document.getElementById('dogpicture').height = 50; // string "50" also works
        document.getElementById('dogpicture').width = 50;
    }
    if (option == "default"){
        document.getElementById('dogpicture').height = 100;
        document.getElementById('dogpicture').width = 100;
    }
    if (option == "big"){
        document.getElementById('dogpicture').height = 150;
        document.getElementById('dogpicture').width = 150;
    }
}

// alternate syntax that changes the style attribute properties
function dogsizeStyleMutation(option){
    if (option == "small"){
        document.getElementById('dogpicture').style.height = "50px";
        document.getElementById('dogpicture').style.width = "50px";
    }
    if (option == "default"){
        document.getElementById('dogpicture').style.height = "100px";
        document.getElementById('dogpicture').style.width = "100px";
    }
    if (option == "big"){
        document.getElementById('dogpicture').style.height = "150px";
        document.getElementById('dogpicture').style.width = "150px";
    }
}

<img id="dogpicture" src="https://www.what-dog.net/Images/faces2/scroll0015.jpg" alt="dog" height="150" width="150" />

<br/>
<h3>Changes element height/width</h3>

<select id="dogsize" name="sizeofdog" onchange="dogsize(this.value);">
    <option value="small"> small </option>
    <option value="default" selected> default </option>
    <option value="big"> big </option>
</select>

<br/>
<h3>Changes element style attr height/width</h3>

<select id="dogsizeStyle" name="sizeofdogInStyle" onchange="dogsizeStyleMutation(this.value);">
    <option value="small"> small </option>
    <option value="default" selected> default </option>
    <option value="big"> big </option>
</select>

edited Dec 4, 2016 at 23:43

answered Dec 4, 2016 at 23:24

Jecoms

2,8784 gold badges25 silver badges34 bronze badges

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

3 Comments

Praveen Kumar Purushothaman Over a year ago

So like what exactly has been changed?

Arszenik Over a year ago

@Jecoms I dont know why its not working so, I have another function that changes the image itself based on another select, maybe thats whats causing the problem?

Jecoms Over a year ago

Could be. You have to consider all bits that interact with a piece of the DOM/code. The height/width also works if setting the value to a number, but a string such as "150px" doesn't work in this snippet. Could be a browser specific js implementation issue.

Collectives™ on Stack Overflow

Changing HTML image size with Javascript [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related