JavaScript Image Swap

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>

Answer №1

The attempt to replace the image with the same one is happening seamlessly, although it may not be visually apparent at first glance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting a problem with CSS styling in a jQuery bounce effect

In my current project, I am experimenting with creating a unique 'hovering' link. When the user hovers over an image and then moves the mouse away, I want the link to 'jump' back instead of using jQuery animation. +-----------+ | I ...

What is the best way to create a sidebar that remains open without triggering a new sidebar every time it is clicked

I am looking to add a sidebar that opens a new view without navigating to a different page. The sidebar remains consistent and I want to avoid duplicating it on all pages. Check out this photo for an example. My goal is to provide additional content or fe ...

Rendering of @font-face on Windows 7 was executed flawlessly

I have been utilizing @font-face to implement custom fonts on a website. The custom font displays correctly in Firefox, IE, Safari, and Chrome on Mac. However, when viewed on Chrome in Windows 7, the text appears green at 10px instead of black or grey. ... ...

changing the contents of an array within the current state

My current task involves updating a list of names in the state before sending it as props to another component. // code snippet omitted for brevity this.state = { // other states here playerName: { player1Name: 'Default Player 1 Name ...

Transform C# ASPX to handlebars format

Initially, my task was to choose and relocate a single li from many options into a different div. But now, I am required to achieve the same result using a JS template which utilizes handlebars. The C# section is as follows: <li class="l-row__item pr ...

What is the best way to dismiss the modal window in React upon clicking the "Add product" button?

Hello all, I'm having trouble figuring out how to close the modal window in React. I want it so that when the user clicks on the "Add" button, a modal window opens for data input, and then upon clicking the "Add product" button, the window closes imme ...

No matter what I try, the Mongoose query consistently comes back with

I've been attempting to perform a query where I find products with an ID greater than a specified minimum, but it always returns an empty array. const productSchema = require("./productsSchema"); const getProductsGreaterThan = async (min ...

The JQxTreeGrid is displaying properly, however, it is not loading the data from the JSON source

Looking for some assistance with loading Json data into a Jquery grid using jqxTreegrid. Currently, the grid is displaying but not the data. Despite no errors in the debugger, I'm unable to figure out the issue. Any help resolving this matter would be ...

Substituting text in a document by utilizing two separate arrays: one holding the original text to be found and another storing the corresponding text for

I am facing a challenge with replacing specific text strings in a file. I have two arrays - one containing the strings that need to be located and replaced, and the other containing the replacement strings. fs.readFile("./fileName.L5X", "utf8", function( ...

Understanding the getJSON MethodExplaining how

$.getJSON( main_url + "tasks/", { "task":8, "last":lastMsgID } I'm a bit confused about how this code functions. I'm looking for a way to retrieve messages from a shoutbox using a URL or some sort of method that the function here ...

Customizing the "Actions" Dropdown in APEX Interactive Grid

Is there a way to modify the choices available in the Selection section of a Row Actions Menu in Apex? I managed to alter the options in the Line Menu, but I'm facing challenges when trying to make changes in the Selection Menu. The Selection Menu i ...

"I can't figure out why my footer keeps showing up at the top of the page unexpectedly

Currently, my footer is showing up at the top of the page but I really want it to be at the bottom. I'm new to HTML so apologies if this is a simple fix. Here is my file with internal CSS: .middle { position: fixed; top: 50%; left: 50%; tr ...

AngularJS: Modifying directive according to service value update

In my current application, I have a basic sidebar that displays a list of names fetched from a JSON call to the server. When a user clicks on a name in the sidebar, it updates the 'nameService' with the selected name. Once the 'nameService& ...

Dynamic HTML and CSS Table Alignment Techniques

Issue Screenshot: Is there a way to properly align the right column of the table, particularly the Student NRIC row and School's? .formstyled { width:70%; margin-left:5%; } .formstyled input[type=text],input[type=password],text ...

Prevent repeating the same table header multiple times when generated dynamically with jQuery

I have an array called groups which contains name and regid. I want to display the name key as the column header of a table. To achieve this, I implemented the following code: var Name = v.name; var regId = v.regid; var rowStr = '<th d ...

Cloud Foundry deployment faces startup issues

I attempted to deploy my Node.js application on Bluemix, but encountered a failure. After executing cf logs IssueTracker --recent, I came across the following error: 2018-12-10T16:50:24.38+0000 [APP/PROC/WEB/0] ERR module.js:549 2018-12-10T16:50:24 ...

The grid is evenly populated with icons

Is it possible to evenly distribute the icons by only using CSS? I'm aiming to achieve a result similar to this (unfortunately, I can't post images due to my lack of reputation). You can find an example solution that uses JavaScript here: _htt ...

Fade in and out a Div with a distinct class and ID

I'm currently experiencing a minor issue with some jQuery code. Below are some divs: <div class="add" id="1">Follow</div> <div class="added" id="1">Following</div> <div class="add" id="2">Follow</div> <div clas ...

Leveraging the p-steps module from PrimeNG for smaller screen sizes

I am facing an issue with resizing the p-steps component from PrimeNG to avoid overflow in smaller screen resolutions. The current code I am using is as follows: <div class="d-flex card mb-4"> <p-steps [model]="items" ...

Easy steps to launch Excel application with an HTML button using a web browser

How can I create a button on an HTML page that will launch an Excel application when clicked by the user? <button class="btn btn-primary" onclick="window.open('excelApplication.url','_blank')">Launch Excel</button> ...