I tried implementing this script but it didn't work for me. I'm not sure what to do next, so I'm reaching out for help. The script is at the top of the page, followed by a picture with an id that I'd like to change when a button below is clicked.
function updateImage()
{
document.getElementById("theImage").src="https://cdn.glitch.com/6dc68b9b-62ee-49bb-904f-9bc85ead27a3%2Fhn%C4%9Bd%C3%A1-2.jpg?1539113123667";
}
<div style="padding-top:2%;padding-left:42.7%" class="row">
<img id="theImage" src="https://cdn.glitch.com/6dc68b9b-62ee-49bb-904f-9bc85ead27a3%2Fhn%C4%9Bd%C3%A1-2.jpg?1539091308847" style="width:300px;height:240px">
</div>
<center>
<div class="btn-group" style="padding-top:1%">
<button type="button" class="btn btn-danger" onclick="updateImage()">Change Image</button>
<button type="button" class="btn btn-danger dropdown-toggle px-3" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Brown</a>
<a class="dropdown-item" href="#">Wood Finish</a>
<a class="dropdown-item" href="#">Black Oil</a>
<a class="dropdown-item" href="#">White Oil</a>
<a class="dropdown-item" href="#">Gray</a>
<a class="dropdown-item" href="#">Light Brown</a>
<a class="dropdown-item" href="#">Teak</a>
<a class="dropdown-item" href="#">Green</a>
</div>
</div>
</center>