Updating pictures on Bootstrap's project showcase template

I attempted to modify the source of an image by clicking on smaller ones using bootstrap’s template found at . Despite my efforts, I have not been able to achieve the desired result. (Any help is greatly appreciated!)

I included id="myImage" on the main image tag

<img class="img-responsive" id="myImage" src="img1.jpg">

and added onClick="changeImage()" to the smaller images

<div class="col-sm-3 col-xs-6">
    <a href="#" onClick="changeImage()">
        <img class="img-responsive portfolio-item" src="img2.jpg">
    </a>
</div>

The script function is:

<script type="text/javascript">
    function changeImage() {
        if(document.getElementById('myImage').src == 'img1.jpg') {
            document.getElementById('myImage').src = 'img2.jpg';
        } else if(document.getElementById('myImage').src == 'img2.jpg') {
            document.getElementById('myImage').src = 'img1.jpg';
        }
    }
</script>

(Any assistance would be much appreciated!)

javascripthtmlcss

Answer №1

Use getElementBYId('onlyIDnoDot') as the correct syntax.

<script type="text/javascript">
    function switchImage() {
        if(document.getElementById('myImage').src == 'http://placehold.it/750x500') {
            document.getElementById('myImage').src = 'http://placehold.it/500x300';
        } else if(document.getElementById('myImage').src == 'http://placehold.it/500x300') {
            document.getElementById('myImage').src = 'http://placehold.it/750x500';
        }
    }
</script>

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

What is the proper way to wait for an async function to finish in JavaScript before returning its result?

Currently, I find myself grappling with a Google Sign-in Authentication application that comprises a React frontend and an Express backend. The hurdle I currently face lies in the validation of tokens on the backend. The documentation for this process prov ...

javascriptexpressasync-awaitgoogle-signin

The chosen state does not save the newly selected option

Operating System: Windows 10 Pro Browser: Opera I am currently experiencing an issue where, upon making a selection using onChange(), the selected option reverts back to its previous state immediately. Below is the code I am using: cont options = [ ...

javascriptreactjs

What benefits does redux-thunk offer?

Why is redux-thunk necessary? It seems like using a thunk just adds an extra layer of complexity by wrapping expressions and using middleware. The sample code from redux-thunk further confuses the process. import thunk from 'redux-thunk'; // No ...

javascriptreactjstypescriptreact-reduxredux-thunk

Catch the return of the transition event

My website is built on asp net core, with all pages displayed as partialviews to create a spa model without relying on angular or other frameworks. By switching partialviews, I can easily modify the page's url using window.history.pushState ("objec ...

javascriptajaxasp.net-core

React.js implementation of a checkout feature using in-game currency

I am currently working on a game that involves in-game currency, but I'm facing some confusion. It seems like I might be overcomplicating things. In my store, users can purchase items using the gold (max variable) they have. The shopping cart function ...

javascriptreactjsreduxe-commerceflux

Distinguishing factors between Python objects and JSON objects

At first glance, it may seem that Python has native support for JSON. However, the one exception is that JSON is able to store JavaScript functions. My dilemma is this: I require passing JSON to a Python file via the terminal. Is it advisable to use eval( ...

javascriptpythondjangojsonnode.js

TS object encountering a restriction with an inaccessible method

I'm facing a challenge trying to utilize a method stored on a Typescript class within a Vue component. When I attempt to use a method defined on that class from another class (which also happens to be a Typescript Vue component), the console throws a ...

javascripttypescriptvue.js

HTML - Is there a way to hide the label showing the number of files selected when using input type=file?

I am seeking a way to either eliminate the label that indicates the number of selected files, or be able to control it so that when I upload a file, the label increases and decreases when I delete an uploaded file. How can I achieve this? Below is my HTML ...

jqueryhtmlasp.net-mvcfile-upload

Can two controllers be used for the main-app and sub-app with the same URL using angular ui-route?

I have implemented two controllers, 'BaseController' and 'SubController', for my main application and sub-application. Both controllers are configured to point to an empty URL. Below is the configuration for the main application:- ang ...

javascriptangularjsroutes

Tips on incorporating a past random selection into an RPG lifepath generator's current random selection process

Currently, I am in the process of creating a JavaScript version of a basic "life path generator" commonly seen in pen and paper RPGs. The generators I have been working on are inspired by the structure provided at this link: However, I am encountering dif ...

javascriptarraysif-statementrandom

Identifying mouse proximity through processing.js

I am using processing.js for coding. I am trying to dynamically adjust the size variable so that it increases as the cursor approaches the ellipse and decreases as the cursor moves away from it. I also want to set a limit for the size, preferably between 5 ...

javascripthtmlprocessingprocessing.js

The labels displayed on ChartJs are inaccurate

As a student who has been learning programming for about a month, I must admit that there may be many mistakes in my code. In developing a website, I have incorporated a chart from the ChartJs library. The chart consists of an outer circle representing ho ...

javascripthtmlchartschart.js

What is the method for extracting latitude and longitude values individually from JSON data?

Upon receiving the JSON response from the Google Maps API stored in a variable named 'obj', I noticed that alerting obj.name returns "Pancakes on the Rocks". To access the icon, I can use obj.icon. However, I am struggling to retrieve separate va ...

javascriptjsongoogle-maps

How to update the date format in v-text-field

I have run into an issue while working on a Vue.js project that utilizes Vuetify. The problem lies with the default date format of the v-text-field when its type is set to "date." Currently, the format shows as mm/dd/yyyy, but I need it to display in the y ...

javascriptvue.jsvuetify.js

JavaScript and TypeScript: Best practice for maintaining an Error's origin

Coming from a Java developer background, I am relatively new to JavaScript/TypeScript. Is there a standard approach for handling and preserving the cause of an Error in JavaScript/TypeScript? I aim to obtain a comprehensive stack trace when wrapping an E ...

javascripttypescripterror-handlingstack-trace

Using Angular 6 to import GeoJSON into a Leaflet map

I am facing an issue while trying to import a GeoJson file into Leaflet in my Angular app version 6. Although the geojson is being successfully drawn on the leafletmap, I am encountering an error that is preventing me from building my app. Is there anyone ...

javascriptangularleafletgeojsonngx-leaflet

Submitting with enter key on typeahead suggestions

Seeking guidance on Bootstrap typeahead: how can I configure it to submit the entered text upon pressing the enter key? Specifically, if I type "hello" in the typeahead input and hit enter, how can I submit "hello"? I've successfully disabled the aut ...

javascriptjqueryajaxtwitter-bootstrapbootstrap-typeahead

Utilizing jQuery Mobile to tap into smartphone functionalities like camera and calling capabilities

Can mobile features like the camera and sensors be accessed from an HTML page created with jQuery Mobile? In simpler terms, is it feasible to utilize mobile features using jQuery Mobile? It's clear that I will be accessing this page on a mobile phon ...

jqueryhtmljquery-mobile

javascript Href and onclick malfunctioning

I am encountering an issue with a form on my webpage: <form name="myForm" id="myForm" method="post" action="someUrl.php"> ... </form> There is a div outside of this form which contains an anchor link: <a href="anotherUrl.php" onclick="doc ...

javascriptphphtml

The second asynchronous function relies on the completion of the first

Despite dedicating two days to exploring async/await and promises, I am still unable to make it work correctly. The challenge lies in the fact that the second await for b relies on the result of the first a. It seems no matter what approach I take, b keep ...

javascriptnode.js