Changing HTML image size with Javascript : <p>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.</p>

<p>HTML:</p>

<pre><code>&lt;img id="dogpicture" src="dog1.png" alt="dog" height="150" width="150"&gt;&lt;/img&gt;

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

<p>JS:</p>

<pre><code>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";
    }
}
</code></pre>
